使用Angular 2 ngFor遍歷JSON對象

Question

在編寫獲取json的服務之前，我只想使用一些虛擬json來測試前端。 用ngFor遍歷json的正確方法是什么？ 我用一個簡單的界面嘗試了下面的代碼。

在component.ts文件（ngOnInit（））中：

var jsonSample = {
    "name": "sample1",
    "content": [
    {
      "id": "3",
      "name": "Test",
      "value": "45"
    }, 
    {
      "id": "4",
      "name": "Test2",
      "value": "60",
    }]
}

var items: Array<IContent> = jsonSample.content;

然后在HTML中：

<tr *ngFor='let content of items'>
      <td>{{content.name | lowercase}}</td>
      <td>{{content.id}}</td>
      <td>{{content.value}}</td>
</tr>

我應該嘗試改用JSON.parse嗎？

Answer 1

就json對象遍歷而言，您的*ngFor看起來不錯。 您無需在此處執行JSON.parse ，因為您直接設置了對象。

如果收到服務答復，請在此處檢查。 您將要做res.json()來從Response對象中解析並獲取json數據。

Answer 2

@torazaburo知道了。 我只需要更改：

var items: Array<IContent> = jsonSample.content;

至

items: IContent[];
this.items = jsonSample.content;