Angular2:遍历对象数组的ngFor

Question

例如，使用这个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>

我在这里做错什么了？

Answer 1

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

第一次发言

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

这是不起作用的，因为ngFor在angular 2中类似于ng-repeat中的angular 1。为了使您的ngFor工作，循环项必须是一个数组，在您的情况下，行是一个对象，而不是一个数组，因此它显然不能工作。

在你的第二次陈述中

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

循环项rows.TableRows是一个带有一个元素的数组，因此它将工作，并将输出作为

Lord of the Rnis    2:40

我希望这就是你要找的。