Angular 无法获取api'；s数据

我有一个名为

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();
   }
 }

  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);
    }

  }

现在我在

customer

组件中显示这个

api的

数据如下：

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>

博客帖子：
{{post.title}

{{post.body}

customer.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();
   }
 }

  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);
    }

  }

从'@angular/core'导入{Component，OnInit}；
从“../Service”导入{Service}；
从“rxjs/operators”导入{map}；
从“../models”导入{ipost}；
@组成部分({
选择器：“应用程序客户”，
templateUrl:“./customer.component.html”，
样式URL:['./customer.component.css']
})
导出类CustomerComponent实现OnInit{
构造函数（公共CustomerServiceList:Service）{}
公共异步ngOnInit（）：承诺{
const posts:IPosts=wait this.CustomerServiceList.getContactList（）；
控制台日志（posts）；
}
}

我可以在控制台中看到api的数据：

---

但无法在

.html

文件中显示它。调用

api

有什么问题
这是类似这样的stckblitz更改客户组件

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);
   }
 }

导出类CustomerComponent实现OnInit{
构造函数（公共CustomerServiceList:Service）{}
职位：IPosts[]；
公共异步ngOnInit（）：承诺{
this.posts=等待this.CustomerServiceList.getContactList（）；
console.log（this.posts）；
}
}

服务

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

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

public getContactList（）：承诺{
const-apirl:string='1〕https://jsonplaceholder.typicode.com/posts';
返回此.http.get（apirl.toPromise（）；
}

---

检查这里是否正常

更改客户组件如下

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);
   }
 }

导出类CustomerComponent实现OnInit{
构造函数（公共CustomerServiceList:Service）{}
职位：IPosts[]；
公共异步ngOnInit（）：承诺{
this.posts=等待this.CustomerServiceList.getContactList（）；
console.log（this.posts）；
}
}

服务

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

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

public getContactList（）：承诺{
const-apirl:string='1〕https://jsonplaceholder.typicode.com/posts';
返回此.http.get（apirl.toPromise（）；
}

---

它在这里工作检查没有

async

调用您可以使用

。然后
从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>

如果不调用
异步
调用，您可以使用
。然后
从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>


你可以经常使用可观察的东西而不是承诺来传递价值
异步的。类似地，可观察物可以代替事件
处理程序。最后，因为可观察对象提供了多个值，所以
可以在您可能构建和操作的地方使用它们
数组。（来自Angular.io）

检查这个

你可以这样改变--
客户组件

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);
  }
}

导出类服务{
构造函数（专用http:HttpClient）{
}
public getContactList（）：可观察{
const-apirl:string='1〕https://jsonplaceholder.typicode.com/posts';
返回this.http.get（apirl）；
}
}

你可以经常使用可观察的东西而不是承诺来传递价值
异步的。类似地，可观察物可以代替事件
处理程序。最后，因为可观察对象提供了多个值，所以
可以在您可能构建和操作的地方使用它们
数组。（来自Angular.io）

检查这个

你可以这样改变--
客户组件

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);
  }
}

导出类服务{
构造函数（专用http:HttpClient）{
}
public getContactList（）：可观察{
const-apirl:string='1〕https://jsonplaceholder.typicode.com/posts';
返回this.http.get（apirl）；
}
}
我认为，您需要在
this.data=posts
中使用该常量，并在
ngFor
中使用数据。我认为，您需要在
this.data=posts
中使用该常量，并在
ngFor
中使用数据。您可以在方法级别声明常量，除此之外。很高兴为您提供帮助：）您没有提供正确的链接
stckblitz
word，请检查一下..:）您在方法级别声明的常量，除此之外一切正常。很高兴为您提供帮助：）您没有提供正确的链接
stckblitz
word，请检查一下：）谢谢您的指导：）谢谢您的指导：）