NgFor 仅支持绑定到 HTML 中的数组等 Iterables答案

【问题标题】：NgFor only supports binding to Iterables such as Arrays in HTMLNgFor 仅支持绑定到 HTML 中的数组等 Iterables
【发布时间】：2019-11-25 11:58:06
【问题描述】：

我正在尝试从服务中调用一个非常简单的 HTTP GET 方法。该方法可以正常工作，因为我可以在浏览器的控制台中看到数据数组。

服务：

export class ApiService {
  PHP_API_SERVER = 'http://localhost/dev/backend';

  listArticles(): Observable<Article[]> {
    return this.httpClient.get<Article[]>(`${this.PHP_API_SERVER}/list.php`);
  }

  constructor(private httpClient: HttpClient) { }

}

组件：导出类 HomeComponent 实现 OnInit {

  artikel: Article[];

  constructor(private apiService: ApiService) { }

  ngOnInit() {
    this.apiService.listArticles().subscribe((artikel: Article[]) => {
      this.artikel = artikel;
      console.log(this.artikel);
    })
  }

组件-HTML：

... div *ngFor="let article of artikel"

错误（在浏览器中）： HomeComponent.html:4 ERROR 错误：找不到“object”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

据我所知，“artikel”是一个数组，但运行时一直告诉我它不是。我错过了一些类型转换吗？

【问题讨论】：

日志输出显示什么？
显示console.log(this.artikel);的输出
初始化artikel: Article[];所以把它改成artikel: Article[] = []

标签： angular rxjs

【解决方案1】：

http 调用是异步的，所以在调用 subscribe 之前，html 会被渲染为： artikel: Article[] 是一个数组，但未初始化。

尝试添加：

artikel: Article[] = [];

这样，第一次渲染它就不会崩溃，当你的数据到达时它会更新。

【讨论】：