Я изучаю Angular и пытаюсь использовать сетевой веб-API, в котором у меня есть app.module.ts, служебный файл, модель с именем comments, app.component.ts и app.component. html файлы
Я пытаюсь отобразить сообщения в своем браузере с помощью веб-API с веб-адреса https://jsonplaceholder.typicode.com/posts/1/comments.
Мой код успешно компилируется, но в браузере не отображаются никакие данные. и я не могу найти никаких ошибок. Я работаю в Angular 8/9. Мой код ниже.
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FreeapiService } from './services/freeapi.service';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [FreeapiService],
bootstrap: [AppComponent]
})
export class AppModule { }
freeapi.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class FreeapiService {
constructor(private http: HttpClient) { }
getComments(): Observable<any> {
return this.http.get("https://jsonplaceholder.typicode.com/posts/1/comments")
}
}
Комментарии Класс
export class Comments {
postId: number;
id: number;
name: string;
email: string;
body: string;
}
App.component.ts
import { Component, OnInit } from '@angular/core';
import { FreeapiService } from './services/freeapi.service';
import { Comments } from './classes/comments';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular-apicall';
constructor(private _freeApiService: FreeapiService) { }
istComments: Comments[];
ngOnInt() {
this._freeApiService.getComments()
.subscribe
(
data => {
this.istComments = data;
}
);
console.log("This is working");
}
}
Это мой app.component. html файл, в котором я хочу показывать данные в таблице, но показывать только заголовок
<table>
<tr>
<th>ID</th>
<th>Post Id</th>
<th>Name</th>
<th>Email</th>
<th>Body</th>
</tr>
<tr *ngFor="let com of istComments">
<td>{{com.id}}</td>
<td>{{com.postId}}</td>
<td>{{com.name}}</td>
<td>{{com.email}}</td>`enter code here`
<td>{{com.body]}</td>
</tr>
</table>
Чего мне не хватает?