解決錯誤 NgFor 只支持綁定到 Arrays

Question

我一直收到以下錯誤，我發現很難解決。 有人可以幫我解決這個問題嗎？

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

JSON 陣列

[{

    "studentname": "ddd",
    "age": 10,
    "school": {
        "s_name": "abc school",
        "school_city": "nsw"
    }
}]

<div   *ngFor="let stu of this.studentSelected; let i = index;" >
   <tr > <td>{{stu.studentname}} :</td>
         <ng-container *ngFor="let sof stu .school">
              <td>{{s.school_city}}</td>
          </ng-container>
   </tr>
</div>

我知道錯誤狀態 NgFor 僅支持綁定到 Arrays。 但是，我不知道如何更正此代碼。

Answer 1

那么你的問題的直接答案是讓school成為一個數組。

在您的代碼中，您在ngFor上執行stu.school ，這不是一個數組，因此只需修改該行：

studentSelected = [{
    "studentname": "ddd",
    "age": 10,
    "schools": [
      {
        "s_name": "abc school",
        "school_city": "nsw"
      }
    ]
}];

並且您的代碼不會顯示任何錯誤：

<div *ngFor="let stu of studentSelected; let i = index;" >
   <tr > 
     <td>{{stu.studentname}} :</td>
         <ng-container *ngFor="let s of stu.schools">
              <td>{{s.school_city}}</td>
         </ng-container>
   </tr>
</div>

這是一個工作示例：
https://stackblitz.com/edit/angular-ivy-ikeuky?file=src/app/app.component.ts

請看一看：-）

Answer 2

在提供的數據中， school是 object 而不是數組，因此您不需要循環。 您可以像這樣直接使用它：

<div *ngFor="let stu of this.studentSelected; let i = index;">
  <tr>
    <td>{{stu.studentname}} :</td>
    <td>{{stu.school['school_city']}}</td>
  </tr>
</div>

我已經為這個變化創建了一個stackblitz並且它正在工作。 請驗證..

如果school是一個數組，使用 ngFor 就不會出現上述錯誤..