错误消息 "NgFor only supports binding to Iterables such as Arrays" not working 的解决方案

Question

在我的 angular 应用程序中，我想显示用户可以 select 的产品列表。

所以在我的 html 文件中，我写了以下代码：

<section fxLayout="column" fxLayoutAlign="center center">
      <mat-selection-list #products>
        <mat-list-option *ngFor="let product of products">
            {{product.name}}
        </mat-list-option>
      </mat-selection-list>
</section>

在 .ts 文件中，我有以下代码：

  products;


  constructor(private productService: ProductService) { }

  ngOnInit() {
    this.loadAll();
  }


  private loadAll(): Promise<any> {
    this.products = [];
    return this.productService.getAll()
    .toPromise()
    .then((result) => {
        result.forEach(product => {
          this.products.push(product);
        });
    })
    .catch((error) => {     
        console.log(error);
    });
  }

我收到以下错误消息：

错误：找不到 'object' 类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如数组。

事实是：产品是 (!) 一个数组。

我仍然收到此错误消息，好像 this.products 实际上不是数组。

这是怎么回事？

Answer 1

您已经有了一个数组，因此无需再次转换为数组，

  result.forEach(product => {
          this.products.push(product);
  });
  this.products = Array.of(this.products); //remove this line

错误消息 "NgFor only supports binding to Iterables such as Arrays" not working 的解决方案

solution for error message "NgFor only supports binding to Iterables such as Arrays" not working

ngfor

angular