Невозможно получить данные API

Question

У меня есть компонент с именем customer, который используется для отображения некоторых данных с использованием api .

Для вызова api я создал файл с именем services.ts и это КОД выглядит следующим образом:

services.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { IPosts } from './models';

@Injectable()
  export class Service {
      constructor(private http: HttpClient) {}

   public getContactList(): Promise<IPosts> {
    const apiUrl: string = 'https://jsonplaceholder.typicode.com/posts'; // dummy API

    return this.http.get<IPosts>(apiUrl).toPromise();
   }
 }

Как показано в коде interface (IPosts), Я объявил этот интерфейс (i, e IPosts) в файле с именем models.ts.Код выглядит следующим образом:

   export interface IPosts {
    userId: number;
    id:     number;
    title:  string;
    body:   string;
    }

Теперь я отображаю эти api's данные в customer компонент выглядит так:

customer.html

   <div class="container">
        <h3>Blog Posts:</h3>
      <div class="blogPost " *ngFor = "let post of posts">
           <p>{{post.title}}</p>
           <p>{{post.body}}</p>
           <hr>
      </div>
  </div>

customer.ts

  import { Component, OnInit } from '@angular/core';
  import { Service } from '../service';
  import { map } from 'rxjs/operators';
  import { IPosts } from '../models';

  @Component({
   selector: 'app-customer',
   templateUrl: './customer.component.html',
   styleUrls: ['./customer.component.css']
  })

  export class CustomerComponent implements OnInit {
          constructor(public customersServiceList: Service) {}

  public async ngOnInit(): Promise<void> {
    const posts : IPosts = await this.customersServiceList.getContactList();
    console.log(posts);
    }

  }

Я вижу данные API в консоли:

Но не удается отобразить его в файле .html.Что не так в названии api.
Вот stckblitz DEMO

Answer 1

Без вызова async вы можете использовать .then для получения ответа от службы API:

В HTML:

<div class="container">
  <h3>Blog Posts:</h3>
  <br>
  <div class="blogPost " *ngFor="let post of posts">
    <p>{{post.title}}</p>
    <p>{{post.body}}</p>
    <hr>
  </div>
</div>

В файле TS:

posts: any;
constructor(public customersServiceList: Service) { }

ngOnInit() {
  this.customersServiceList.getContactList().then(response => {
    if (response) {
      this.posts = response;
    }
 });

}

Пример StackBlitz

Answer 2

Вы можете часто использовать наблюдаемые вместо обещаний для доставки значений асинхронно.Точно так же наблюдаемые могут заменять обработчики событий.Наконец, поскольку наблюдаемые предоставляют несколько значений, вы можете использовать их там, где в противном случае могли бы строить массивы и работать с ними (из Angular.io)

проверить эту ссылку

может измениться так: CustomerComponent

export class CustomerComponent implements OnInit {
 constructor(private customersServiceList: Service) {}

  public ngOnInit() {
    this.getPosts();
  }

  public getPosts(){
    this.customersServiceList.getContactList().subscribe(res => {
    console.log(res[0].title);
  },
  (error) => {
    console.log(error.error);
  });
  }

}

Сервис

export class Service {

 constructor(private http: HttpClient) {
  }


  public  getContactList(): Observable<IPosts[]> {
    const apiUrl: string = 'https://jsonplaceholder.typicode.com/posts';

    return this.http.get<IPosts[]>(apiUrl);
  }
}

Answer 3

Изменить CustomerComponent как это

export class CustomerComponent implements OnInit {

  constructor(public customersServiceList: Service) {}
  posts : IPosts[];
  public async ngOnInit(): Promise<void> {
      this.posts  = await this.customersServiceList.getContactList();
      console.log(this.posts);
   }
 }

Сервис

 public getContactList(): Promise<IPosts[]> {

    const apiUrl: string = 'https://jsonplaceholder.typicode.com/posts';
    return this.http.get<IPosts[]>(apiUrl).toPromise();
  }

Это проверка работы здесь StackBlitz