使用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，因为您已经直接设置了一个对象。

在从服务接收响应的情况下，检查here。您将执行res.json()来解析并从Response对象获取json数据。

Answer 2

@torazaburo得到了它。我只需要改变：

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

至

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