Потреблять онлайн API в Angular - PullRequest
0 голосов
/ 19 апреля 2020

Я изучаю 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>

Чего мне не хватает?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...