I am currently facing an issue with a component in my project. The component is responsible for fetching data from a REST API using the HttpClient, and the data retrieval seems to be working fine as I can see the data being logged in the Console.
However, I am encountering difficulties when it comes to displaying this data in the HTML. Despite no errors in the code, the data simply refuses to show up on the screen.
Below is a snippet of the relevant code:
Imports within 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 definition
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 code attempts to display the data like so:
<div *ngFor="let data">{{data.id}}</div>I have also experimented with using an Observable but I suspect that my implementation may be incorrect. It seems quite different from working with AngularFire.