版本1：

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

您应该阅读有关Angular HTTP客户端中使用的RxJS的信息。函数getListOfBeers返回一个Subscription，而不是啤酒数组。

服务中

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>

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

2 个答案:

版本1：

版本2