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;

使用Angular 2 ngFor迭代JSON对象

2 个答案: