2017-10-05 160 views
0

例如與此JSON:Angular2:ngFor通過對象數組迭代

{ 
    "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> 

我在這裏做錯了什麼?

+0

什麼是行?一個數組還是Imovies?或者一個ITableRows數組? – Abiezer

回答

1

在你的情況下,你的第一條語句將不起作用。

第一條語句

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

這不是工作,因爲ngForangular 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 

我希望這是你在找什麼。