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類似於在angular 1ng-repeat。爲了使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 

我希望這是你在找什麼。