发出 API GET 请求并以 HTML 格式显示信息。

Question

我一直在尝试进行 API 调用，但没有成功。显示名称时收到此错误消息。非常抱歉，我已经粘贴了三个文件，但这是我在这里的第一个问题，我是新手。感谢您的帮助。

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

这是我的beers.service.ts 文件

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class BeersService {
  private beerUrl = 'https://api.punkapi.com/v2/beers/';
  beers;

  constructor(private _httpClient: HttpClient) { }

  getListOfBeer() {
    return this._httpClient.get(this.beerUrl).subscribe(
      res => {
         this.beers = res;
    });
  }
}

这是我的app.component.ts 我感觉问题出在构造函数上，但我尝试的一切都没有成功。

import { Component } from '@angular/core';
import { BeersService } from './beers.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  beers;

  constructor(private _beerService: BeersService) {
    this.beers = _beerService.getListOfBeer()
  }
}

最后是我的app.component.html

<div class="container">
  <div *ngFor="let beer of beers">
    <p>{{ beer.name }}</p>
  </div>
</div>

Answer 1

您应该阅读 RxJS，因为它在 Angular HTTP 客户端中使用。函数 getListOfBeers 返回一个订阅，而不是啤酒数组。

服务中

getListOfBeer() {
    return this._httpClient.get(this.beerUrl);
}

在组件中

constructor(private _beerService: BeersService) {
    _beerService.getListOfBeer().subscribe(res => this.beers = res)
}

并确保使用空数组实例化啤酒

beers = []

Answer 2

您有一个未初始化的变量。当你只是说beers 或beers:any 时，它仍然是未定义的。这意味着，您的模板正在尝试循环一些未定义的内容（直到 API 请求返回，即在您获得该内容后的几毫秒）。

预初始化数组或有条件地显示它。

版本 1：

预初始化app.component.ts中的数组：

export class AppComponent {
  beers = [];
  ...

版本 2

在应用启动时，您的 component.beers 是未定义的，直到 API 返回。您不能循环未定义，因此在此之前隐藏列表。查看beers.component.html：

<div class="container" *ngIf="beers">
    <div *ngFor="let beer of beers"><p>{{ beer.name }}</p>
</div>