英文:
How can I Interpolate data from HttpClient Rest Api?
问题
I have this component where I am pulling data from a REST API using the HttpClient. The pulling of the data works well. I could tell because I could see the data being displayed in Console Log.
When it comes to using the data in the HTML I am stuck. I can't figure how to do so. Nothing is broken; the Data just won't show.
Here is my Code
Imports in the Component
import { Component, OnInit } from '@angular/core';import { MatTabsModule } from '@angular/material/tabs';import { MatListModule } from '@angular/material/list';import { Observable } from 'rxjs';import { HttpClient, HttpHeaders } from '@angular/common/http';
This is the class
export class TestComponent implements OnInit {constructor(private http: HttpClient) {this.http.get<any>('http://api.data_redacted_for_privacy').subscribe(data => {console.log(data);});}ngOnInit() {this.http.get<any>('http://api.data_redacted_for_privacy').subscribe(data => {console.log(data);});}}
The HTML is as follows
<div *ngFor="let data">{{data.id}}</div>
I tried adding an Observable, but I believe my implementation is wrong. Sure, it's not like using AngularFire.
英文:
I have this component where I am pulling data from a REST API using the HttpClient. The pulling of the data works well. I could tell because I could see the data being displayed in Console Log.
When it comes to using the data in the HTML I am stuck. I can't figure how to do so. Nothing is broken the Data just won't show.
Here is my Code
Imports in the Component
import { Component, OnInit } from '@angular/core';import {MatTabsModule} from '@angular/material/tabs';import {MatListModule} from '@angular/material/list';import { Observable } from 'rxjs';import {HttpClient, HttpHeaders} from '@angular/common/http';
This is the class
export class TestComponent implements OnInit {constructor(private http: HttpClient ) {this.http.get<any>('http://api.data_redacted_for_privacy').subscribe(data => {console.log(data);});}ngOnInit(){this.http.get<any>('http://api.data_redacted_for_privacy').subscribe(data => {console.log(data);});}}
The HTML is as follows
<div *ngFor="let data">{{data.id}}</div>
I tried adding and Observable, but i believe my implementation is wrong. Sure is not like using AngularFire.
答案1
得分: 1
将返回的数据分配给一个类变量，然后使用 let... of... 循环遍历它：
export class TestComponent implements OnInit {allData: any = null; // 或者你可以使用其他类型constructor(private http: HttpClient){}ngOnInit(){this.http.get<any>('http://api.data_redacted_for_privacy').subscribe(data => {console.log(data);this.allData = data;});}}
然后在模板中使用：<div *ngFor="let data of allData">{{data.id}}</div>
英文:
Assign the returned data to a class variable, then loop through it using let... of...:
export class TestComponent implements OnInit {allData: any = null; // or any other type you have at your disposalconstructor(private http: HttpClient){} // you don't need to subscribe to the same endpoint (if it's the same endpoint, disregard the comment if it's not!)ngOnInit(){this.http.get<any>('http://api.data_redacted_for_privacy').subscribe(data => {console.log(data);this.allData = data;});}}
Then in template: <div *ngFor="let data of allData">{{data.id}}</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论