时间戳

首页 > 解决方案 > 解决错误 NgFor 仅支持绑定到 Arrays

javascript - 解决错误 NgFor 仅支持绑定到 Arrays

问题描述

我一直收到以下错误，我发现很难解决。有人可以帮我解决这个问题吗？

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 只支持绑定到数组。但是，我不知道如何更正此代码。

标签： javascriptangulartypescript

解决方案

那么你的问题的直接答案是制作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

请看一看 ：-）

推荐阅读