从angular中ngOnit的isntead函数中获取http数据
在Angular中，ngOnInit是一个生命周期钩子函数，用于在组件初始化时执行一些初始化操作。而根据题目要求，我们需要从ngOnInit函数中获取HTTP数据，可以通过以下步骤实现：
- 导入必要的模块和服务：
- 导入必要的模块和服务：
- 在组件类中实现OnInit接口，并在类中定义一个私有的HttpClient实例：
- 在组件类中实现OnInit接口，并在类中定义一个私有的HttpClient实例：
- 在ngOnInit函数中使用HttpClient发送HTTP请求并获取数据：
- 在ngOnInit函数中使用HttpClient发送HTTP请求并获取数据：
在上述代码中，我们使用HttpClient的get方法发送GET请求，并传入API的URL。通过subscribe方法订阅Observable对象，当数据返回时，会执行回调函数，并将返回的数据作为参数传入。
至于HTTP数据的处理方式，可以根据具体需求进行操作，例如将数据绑定到组件的属性上，或者在回调函数中执行其他逻辑。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）
- 产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
我正在试用Angular2，并且一直在关注他们的教程。
我目前有一个从json服务器获取数据的服务：
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { User } from './user';
@Injectable()
export class UserService {
co
浏览 0提问于2016-05-15得票数 10
回答已采纳
无法解决此错误已尝试解决相同问题的各种解决方案。在ngonit中获取错误类型'homeController‘中缺少任何帮助，我们将不胜感激
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Http, Response, Headers} from '@angular/http';
@Component({
selector: 'app-home',
templateUrl: './home.component
浏览 10提问于2017-12-21得票数 2
嗨，我正在学习角7，但在某个点被卡住了。我有一个假Rest ( get )，我使用这个API在我的组件中获取用户数据，并最终在我的HTML页面中绑定这些数据，但是在HTML中似乎没有可用的数据，但是我正在组件中接收数据。我有三个文件: 1. Component.service 2. Component.ts 3. Component.html
我已经尝试过在GetAllAppData方法中调用ngOnIt，但是在组件中没有收到成功的数据，但是没有在ngOnIt中填充。
import { Injectable } from '@angular/core';
import { Ht
浏览 0提问于2019-04-08得票数 0
回答已采纳
1回答
最近，我们开始在Angular 4中重写应用程序的前端，我的任务是专注于使用jasmine和karma进行单元测试。我对这个框架和测试运行程序是完全陌生的，而且主要是对整个前端的测试，所以如果我错过了一些非常重要的东西-很抱歉。所以我的问题是测试html输出。当我运行我的测试时，我通常会得到一些信息，关于哪些失败了，发生了什么类型的失败--这很好。从那时起，我一直在做测试，最终让其中一些最简单的东西能够工作。现在我开始处理一个组件活动，它需要一些简单的mock。这是我的spec.ts
import { WelcomeComponent } from "app/core/welcome/
浏览 7提问于2017-08-25得票数 2
3回答
在这个组件中，我有一个名为"CreateBugsViewComponent“的组件，我将使用另一个组件"ProjectBugsComponent”的ngOnit函数--如何做到这一点-- "CreateBugsViewComponent“的代码如下所示：
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validator
浏览 4提问于2021-06-01得票数 0
回答已采纳
我正在使用Angular材质和Angular。
我的表不会在ngOnInit生命周期钩子上显示数据，但在我刷新应用程序后，它会显示：
即使是ChangeDetectorRef也不会影响表。
下面是表格的模板：
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="Phone">
<mat
浏览 0提问于2018-01-10得票数 2
我在typeScript和Range2中面临一个问题。我的TS类如下，
'import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
@Component({
selector: 'app-blogdetail',
templateUrl: './blogdetail.component.html',
styleUrls: ['./blogdetail.compon
浏览 0提问于2017-03-20得票数 1
回答已采纳
2回答
我正试图在我的Range7项目中实现Select2。我遵循了github的所有程序。但还是不起作用。当我向它显示一些静态数据时，它就能工作了。它不填充来自not服务器的数据。请分享你的想法。下面是我的代码
Html代码：
<select2 [options]="areas" [settings]="{ width: '100%' }"></select2>
<div *ngFor="let ar of areas">
<p>{{ar.Area_Name}}</
浏览 2提问于2019-02-13得票数 4
我有一个Angular2 websocket应用程序，它需要在发送任何其他消息之前完成连接上的握手。
我的“小部件”控制器使用一个“网络”服务，它是websockets的包装器。
import { $WebSocket } from 'angular2-websocket/angular2-websocket';
“小部件”的ngOnit是在握手完成之前发送一条websocket消息。
如何确保服务将传出消息/“等待”排队，以便在处理之前完成init/握手？
RxJS (受控观察者，被试)？(我还无法将RxJS的秘密从文档中挖掘出来)
答应我？
已经内置成角的东西(
浏览 2提问于2016-06-16得票数 1
回答已采纳
1回答
哦，伙计们，你们好吗？我在Angular 9的这个项目上使用ngx translate时遇到了一个问题，它没有得到资源中的翻译。你能帮我做这个吗？显然一切都很好。 appModule
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: Htt
浏览 14提问于2021-09-11得票数 1
回答已采纳
我有一个getter和一个setter属性，我想在Angular的ngOnit中使用它。
Typescript访问器如下所示：
<code>A0</code>
我的ngOnit是这样的：
<code>A1</code>
构造函数看起来像这样：
<code>A2</code>
但是现在我得到了这个错误：
<code>A3</code>
浏览 22提问于2019-03-26得票数 1
当我打开web时，数据是显示的，但我更改了组件并返回了这个组件数据，而不是show.It，没有显示任何项目。我检查了日志，但没有运行到ngOnIt。ngOnIt在web strat或web重新加载时运行。
这是stock.service.ts
import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
imp
浏览 12提问于2018-03-03得票数 5
回答已采纳
2回答
我想填充一个数组，当我的角度应用程序启动，并使用它的材料自动完成。我可以从PHP后端接收一个JSON。在ngOnInit中，我甚至可以将它交给数组并注销。然而，后来我的数组仍未定义。我应该怎样做才能使内容最终出现在我的选项列表中？
app.component.html：
<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Pick one&
浏览 0提问于2019-01-21得票数 3
回答已采纳
我正在尝试在HTML的select的选项中输出简单的rest使用的json数据。我已经做了很多次了，但我不知道我在这里做错了什么。我想使用ngOnIt，因为我必须在加载任何内容之前加载我的国家和州
HTML -
<b>
<div class="form-group">
<label for="country" class="cols-sm-2 control-label">Country</label>
<div class="cols-sm-10">
<
浏览 0提问于2018-02-01得票数 0
1回答
当数据被创建或更新时，表不会刷新，除非在硬刷新或浏览器刷新之前，我也尝试了更改检测器，但没有解决方案。我尝试了更改检测器引用，新的MatTableDataSource但表不是refreshing.sorry用于发布长代码。 create row.ts
--------------------------------------
import { Component, OnInit, Inject, Input, Output,ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
import {
浏览 20提问于2020-07-24得票数 0
3回答
用angualr组件编写代码，在ngonit上每10秒从服务中获取数据，现在我想停止每10秒运行一次的时间，比如5分钟或数据收集时的特定时间。
组件代码.
Getrecords() {
Interval(10000).pipe(
startWith(0),
switchMap(() => this.getservice.getdata())
).subscribe(data => {
this.code = data
});
}
浏览 1提问于2019-06-24得票数 2
回答已采纳
我试图用角度2动态地改变iframe的src
HTML
<iframe class="controls" width="580" height="780" src="{{controllerSrc}}" frameborder="0" allowfullscreen></iframe>
COMPONENT.TS
import { Component, OnInit } from '@angular/core';
declare var jQuery: any;
const
浏览 2提问于2017-11-09得票数 1
回答已采纳
我有一个angular项目，其中我有一个导航栏路由到不同的组件。导航栏中的两个导航导航到相同的组件，但参数不同。当我尝试从navbar导航到这两个导航中的任何一个时，它都工作得很好。 但是，如果我尝试使用相同的路线和不同的参数从这些导航中的一个导航到其他导航，它将不起作用。 我的ngOnit函数 ngOnInit(): void {
this.configId = this.route.snapshot.paramMap.get('id')
this.getConfigurations();
} 查看来自similar question
浏览 13提问于2020-08-06得票数 0
回答已采纳
2回答
我有一个angular应用程序，其中我使用angular材质创建了一个表，并使用API填充数据。我的代码
ngOnInit() {
this.getChillerApiData();
}
getChillerApiData() {
this.api.getFirstChillerData()
.subscribe((first_data:any) => {
this.first_api_data = first_data;
this.putPrimaryPumpData();
});
}
di
浏览 13提问于2020-02-24得票数 1
回答已采纳
2回答
我目前正在学习角形2和类型记录，到目前为止似乎进展顺利，但我在我创建的用于更新调用它的组件中的数组时遇到了一些困难，尽管来自服务的所有数据都在ng中显示得很好-在我的模板中。
***people-service.ts***
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
/*
Generated class for the PeopleService p
浏览 7提问于2016-10-14得票数 3
回答已采纳
我正在尝试运行google地图API的JS版本，因为常规API给了我一个CORS问题。我想知道两个目的地之间的距离和时间。如何从我创建的服务中取回数据？
我的服务如下所示。
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
@Injectable()
export class GMapsService {
constructor(private http: Http) { }
getData() {
return //the d
浏览 0提问于2018-02-23得票数 0
我的应用程序中有两个路由
1) /home -- HomeComponent -- Home.html
export class HomeComponent implements OnInit, CanReuse,OnReuse, OnActivate, OnDeactivate{
...
constructor(private showHomeLogo:boolean;private showLogoutButton : boolean){
console.log("Home page Constrcutor called");
浏览 0提问于2016-06-30得票数 2
问题:每当我点击一个链接时，它都会同时选中。但它正确地显示了单个链接。
我认为每当我点击链接时，它都不会刷新整个路线。
我的代码: 1.角度路由：
{ path: 'gantt/:id', component: GanttWorkItemsComponent, data: { permission: 'Pages.WorkItems' }},
{ path: 'gantt', component: GanttWorkItemsComponent, data: { permission: 'Pages.WorkItems'
浏览 0提问于2018-10-16得票数 0
1回答
我在一个项目中使用了角7，我想知道如何在没有冻结应用程序的情况下，每分钟检查一次结果。
因此，我有一个从api请求数据的服务：
服务
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class DataService {
baseUrl = 'some url here';
const
浏览 0提问于2019-01-30得票数 0
回答已采纳
1回答
我是新的角2和我玩的环境，以创建一些应用程序。执行类似于站点Angular.io的操作，我可以创建一个可注入的服务，并在我的AppComponent上使用它，但前提是我必须从this.sourceData = {…这样的.ts文件中读取数据}。如果我从Rest服务获得json数据，则数据是未定义的。
app.service.ts
Import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Headers, RequestO
浏览 7提问于2017-03-28得票数 0
回答已采纳
我正在尝试一个将Angular5与Firestore结合使用的示例，但我无法从Firestore数据库中检索任何数据。任何帮助都将不胜感激，因为这是一个停滞不前的节目。具有讽刺意味的是，我可以使用示例将新记录插入到数据库中，但我无法检索任何内容。提前谢谢。
app.component.html：
<ul *ngFor="let post of posts | async">
<li>
<strong>{{ post.title }}</strong>
<br>
{{ post.content
浏览 2提问于2017-11-29得票数 1
我是angular2的新手，我正尝试用我的angular2应用程序从web中获取数据。我正在使用2015。我没有错误，但是数据没有显示，我应该在我的html页面上显示所有的用户登录，但是它是空的，它显示了正确的现有登录号，结果如下：
我的组成部分：
import { Component } from "@angular/core";
import { Http, Response } from "@angular/http";
@Component({
selector: "team",
templateUrl: &#
浏览 6提问于2017-03-23得票数 0
回答已采纳
最近，我一直在与一些JMS提供者(主要是在Wildfly / JBoss容器下)学习消息驱动been。
由于远程客户端发送一些消息到容器/服务器中的队列中，我从来没有机会看到远程客户端(JavaSE)应该输出什么，这发生在远程客户机从客户机调用JMS或EJB的情况下。等等，当控制台输出被来自服务器的日志填充时，所有这些System.out.println()：
HOTSWAP代理: 22:03:05.499 INFO (org.hotswap.agent.HotswapAgent) -加载热交换代理{1.1.0-快照}-无限运行时类重新定义。HOTSWAP代理: 22:03:07.057 I
浏览 5提问于2017-04-22得票数 0
回答已采纳
在service.ts模块中，我从Azure存储中检索数据，并希望读取内容。
service.ts
import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';
import { JsonData } from '../models/jsondata';
import {
BlobServiceClient,
BlobDownloadResponseModel
} from "
浏览 1提问于2020-08-23得票数 0
回答已采纳
2回答
在将一组数据从防火墙查询返回到需要数据的调用组件时，我遇到了问题。我有一个组件，它注入一个服务类，在这个类中，我想对一个防火墙后端执行所有的DB连接/查询。服务中的方法如下所示，可以很好地检索我想要的记录：
getCardsByUserId(userId: string) {
return this.afs.firestore.collection('cards').where('uid', '==', userId).get()
.then((querySnapshot) => {
if
浏览 0提问于2018-04-08得票数 4
回答已采纳
我使用JSONPlace holder Fake API来获取数据。我正在获取服务中的api数据，但是如果我从我的应用程序组件中调用该服务，我将获得undefined，为什么这是我的代码
我的Service.ts是
import { Injectable } from '@angular/core';
import { Http, URLSearchParams, Response, RequestOptions, Headers } from '@angular/http';
import 'rxjs/RX';
import 'rxjs
浏览 0提问于2018-05-21得票数 1
我的angular.json中有一段代码：
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/jquery-ui-dist/jquery-ui.js",
"./node_modules/alertify.js/dist/js/alertify.js",
"./src/assets/jquery/zoomple/zoomple.js&#
浏览 0提问于2019-03-26得票数 0
2回答
我正在使用Codrops的GridLoadingEffects库和Angular JS为它提供来自wordpress的数据列表项目。一切都是通过$http请求从角度检索数据，并异步存储变量。数据被处理并通过ng-bind-html绑定到HTML。
<body ng-app="myApp">
<div class="container" ng-controller="myController">
<ul class="grid effect-6" id="grid"
浏览 0提问于2018-08-29得票数 0
1回答
嗨，我只是想把动态值绑定到下拉列表，但是我搞不懂如何绑定它。
这是我的json数据
[
{
"Name": "data1",
"sno": 3
},
{
"Name": "data2",
"sno": 4
},
{
"Name": "data3",
"sno": 5
}
在这里，我使用提供者调用我的动态数据
dropDown(){
var url1 =&
浏览 0提问于2017-10-01得票数 0
我正在尝试从JSON服务获取数据，该服务通过其端点"“提供ReST格式的数据(用户名和密码)( {" username ":"Mark"，"password":"mark123"} )。
我在angular 2中用userdetail.component.ts文件和user.service.ts创建了一个简单的应用程序，它从我的应用程序的assets文件夹中的apidata文件夹中的userdata.json文件中获取数据
下面显示的是我的代码
app.module.ts
import { BrowserModule }
浏览 0提问于2017-11-15得票数 0
1回答
我正在尝试从web中获取数据。在单个html页面上运行时，我将得到与数据一起的响应，但是如果这个脚本是单独编写的(在html页面的外面)，我无法获取数据。
这是第一次成功接收数据的情况。
<body ng-app="MyApp">
<div ng-controller="PostsCtrl">
<button type="submit" class="btn" ng-click="login()">Get Data</button>
<table bor
浏览 0提问于2016-12-07得票数 0
1回答
我有个问题。我是Angular的新手，我试着从后端(c#)加载数据并将其显示在前端。 在我的后端，我有一个用样本数据填充的模型列表。 public static List<CheckModel> checkModels = new List<CheckModel>(); CheckModel看起来像这样： public string Id { get; set; }
public string Name { get; set; } 现在我试着用Angular来看这个。如果我直接在我的component.ts中创建这样的列表： ordersData = [
{ id:
浏览 12提问于2020-12-10得票数 0
回答已采纳
我正在处理一个项目，在该项目中，服务器上有一个JSON文件，如下所示：
{
"user1": false,
"user2": false,
"user3": false,
"user4": false
}
然后，我向搜索服务中的服务器发出请求，它看起来像这样(但是实际的URL在那里)：
user-service.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/h
浏览 2提问于2017-05-16得票数 2
回答已采纳
我使用的是Angular & firebase后端服务。我已经实现了云firestore功能。我正在尝试从数据库绑定输入字段的值。一切正常，但是值不会反映在输入字段中。如果尝试控制对象，它会正确返回值，但不会在输入字段中绑定。
<form [formGroup]="userForm" #userBusinessForm="ngForm">
<div class="row">
<div class="col-12">
<div clas
浏览 0提问于2020-01-25得票数 0
我正在用RxJS在Angular中编写一个实时搜索功能。我收到一些错误，因为管道:无法读取未定义的属性‘TypeError’。我使用的是Angular 7，并且我尝试了StackOverfloew中的不同代码示例，但无法解决此问题。
app.Component.html
<input type='text' class="form-control input-txt-start" placeholder="Search Domain Name" name="domainId" (keyup)='getSearchRe
浏览 1提问于2019-06-10得票数 6
回答已采纳
4回答
我真的很难理解angular2中的可观察数据和订阅。我目前遇到的问题如下：
我有一个服务，其中包含从API发布和获取数据的方法。服务被注入到组件中，组件直接调用服务中的那些方法。然后，该服务检索数据并将其自身存储，但我随后希望在组件中处理该数据。在服务本身检索和存储数据之后，我不知道如何让组件执行函数。
service.ts
import { Injectable } from 'angular2/core';
import { Http } from 'angular2/router';
@Injectable()
export class Serv
浏览 1提问于2016-01-12得票数 12
我正在从另一个文件(组件)加载数据，当我在函数中对其进行控制台时，所以在事件发生后，它可以工作：
updateSub(data) {
console.log('attempting to print the subsid array' +
this.engagementService.orgSubSidNames)
}
当我试图在这个范围之外，但在我的ngOnit中调用时，它的控制台是空的：
console.log('attempting to print the subsid array initially' +
this.engageme
浏览 0提问于2018-10-10得票数 0
回答已采纳
2回答
嗨，我是一个新手，正在学习angular.js。我想要从这个url获取数据，它实际上是一个API ()，但是我不知道如何在我的controller.js文件中写这个东西。给出的是我的代码，请解释一下我如何从拥有id=36的企业中获得数据。
var reControllers = angular.module('reControllers',[]);
reControllers.controller('RecentController', ['$scope','$http' ,function($scope,$http){
浏览 2提问于2016-08-11得票数 0
3回答
角异步函数后返回
、、
我正在使用编写项目。我实现了从JSON中检索数据的可注入类，如下所示：
import {Injectable, Inject} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';
import {Student} from './student.data';
@Injectable()
export class RosterService {
private students : Studen
浏览 5提问于2016-07-20得票数 0
回答已采纳
2回答
我想在开始渲染组件之前从服务器获取一个异步数据。我尝试过使用路由解析器，但我看不出它能有什么帮助。
我可以使用以下命令通过ActivatedRoute访问组件中的解析器数据：
ngOnInit() {
this.route.data.subscribe((data : Data) => {
this.caseDataManager.setCase(data['casedata']);
});
在“订阅”内的异步代码完成之前，组件得到初始化和呈现。
什么才是正确的方法呢？
更新:我的解析器代码：
import { Injectable } from '@angu
浏览 1提问于2017-07-11得票数 0
我有一个酒店预订项目，前端是用angular2创建的，后端是用laravel创建的，它是一个API系统。我在angular2中有一张表清单。为此，我从laravel获取预订数据，并将其绑定到角表中，但我不知道如何通过api分页。最初，我只获取和绑定了15个数据。如何访问更多的数据时，我们点击下一页。这是laravel角的代码。
Laravel
public function index()
{
$bookings = Booking::where('is_delete', 0)
->paginate(15);
return respo
浏览 0提问于2017-06-12得票数 2
回答已采纳
组件：
import { Component, OnInit } from '@angular/core';
import { ItemsService } from '../items.service';
import { Observable } from 'rxjs';
import { Item } from '../item.model';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'a
浏览 2提问于2018-09-08得票数 2
回答已采纳
1回答
我有一个场景，我需要从构造函数和ngOnInit中分派请求操作，并在这两个函数中加载数据。我试过了，但在第二次调用时，两个分派都没有调用，我看到的数据与我从上一次调用中获得的数据相同。我想知道我是怎么做到的
我尝试从我的条件满足的另一个类调用dispatch。
constructor(
private store: Store<AppState>,
private globalLoginService: GlobalLoginService,
) {
this.filterService.dashboardModified.subscribe(val => {
浏览 7提问于2019-07-19得票数 0
我正在从angular中调用azure广告。我被重定向到了azure广告门户，并且能够成功地进行身份验证。之后，它重定向回web客户端，但在调试模式下，我看到一个空白页面
网址是‘jasdfsdflkjfaafiow....
页面为空，状态无法发送/验证/回调
在我的app-routing.module.ts中，我有
{路径：'auth/callback'，组件: CallbackComponent }
在我的callback.component.ts
构造函数或ngOnIt中没有代码
谢谢
浏览 14提问于2019-07-21得票数 0
1回答
我想在angular8中使用字符串参数。但是，我在"Type 'number‘不能指定输入’string‘“中出现了一个错误。ngOnit。如何使用字符串参数进行路由？
app-routing.module.ts
const routes: Routes = [
..
{
path: 'student/:name',
component: StudentComponent
}
..
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [Ro
浏览 4提问于2021-03-05得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
