如何消除此錯誤 NgFor 僅支持綁定到 Iterables，例如 Arrays

Question

我的組件中有一個 function 作為

  missionSelected(event){
    this.category = event.option.value.children;
    console.log(this.category);
  }

我得到的這個控制台日志是：

    (3) [{…}, {…}, {…}]

但是當我在我的模板中使用這個變量時：

    <mat-list-option *ngFor="let cat of category" [value]="cat">
        <div>{{cat.name}}</div>
    </mat-list-option>

這個給我的錯誤是：

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

我試圖在數組變量中重新初始化相同的 object 但我得到了同樣的錯誤。 我嘗試了很多方法，但沒有得到正確的解決方案。

Answer 1

如果定義了數組，您要么需要簽入模板

<ng-container *ngIf="category">
  <mat-list-option *ngFor="let cat of category" [value]="cat">
    <div>{{cat.name}}</div>
  </mat-list-option>
</ng-container>

或在定義中初始化數組。

category: Array<any> = [];

更新：鍵值keyvalue

我不確定你是否真的在循環遍歷一個數組。 如果在任何情況下它是 object，您可以將鍵值keyvalue與*ngFor指令一起使用。

<mat-list-option *ngFor="let cat of category | keyvalue" [value]="cat.value">
  <div>{{cat.key}}</div>
  <div>{{cat.value}}</div>
</mat-list-option>

Answer 2

也許問題是category的初始值。 例如，您是否將其初始化為[] ？ 如果初始值為 null 或其他 object *ngFor如消息所述無法使用它。

Answer 3

非常感謝您的所有回答，但我只是在這里犯了錯誤：在我的模板中，我使用的參考#category 與我的類別變量相同，如下所示：

<mat-selection-list #category [multiple]="false">           
<mat-list-option *ngFor="let cat of category" [value]="cat.value">
<mat-icon mat-list-icon>folder</mat-icon>             
<div mat-line>{{cat.name}}</div>          
</mat-list-option>
</mat-selection-list> 

我剛剛將該參考名稱從 #category 更改為 #reffer 並且它起作用了.....