Angular2：ngFor迭代对象数组

【问题标题】：Angular2: ngFor iterating through object arrayAngular2：ngFor迭代对象数组
【发布时间】：2017-10-06 02:18:40
【问题描述】：

以这个 JSON 为例：

{
  "TableRows": [
    {
      "Name": "Lord of the Rnis",
      "Length": "2:40"
    }
  ],
  "Category": "Fantasy"
}

进入这些类：

export interface IMovies{
    Category: string;
    TableRows: ITableRows[];
}

export interface ITableRows{
    Name: string;
    Length: string;
}

以下 ngFor 逻辑效果很好，但这不是我想要循环的：

<tr *ngFor="let row of rows">
    <td>{{row.Category}}</td>
    <td>{{row.TableRows[0].Name}}</td>
    <td></td>
</tr>

这个逻辑不起作用：

<tr *ngFor="let row of rows.TableRows">
     <td>{{row.Name}}</td>
     <td>{{row.Length}}<td>
</tr>

我在这里做错了什么？

【问题讨论】：

标签： angular

【解决方案1】：

在您的情况下，您的第一个语句将不起作用。

第一句话

<tr *ngFor="let row of rows">
    <td>{{row.Category}}</td>
    <td>{{row.TableRows[0].Name}}</td>
    <td></td>
</tr>

这不起作用，因为angular 2 中的ngFor 与angular 1 中的ng-repeat 相似。为了让您的ngFor 工作，循环项必须是一个数组，在您的情况下 rows 是一个对象而不是一个数组，所以显然它不会工作。

在你的第二个陈述中

<tr *ngFor="let row of rows.TableRows">
     <td>{{row.Name}}</td>
     <td>{{row.Length}}<td>
</tr>

循环项rows.TableRows 是一个包含一个元素的数组，因此它可以工作并产生如下输出

Lord of the Rnis    2:40

我希望这就是你要找的。p>

【讨论】：