使用 Angular 2 ngFor 遍历 JSON 对象答案

【问题标题】：Iterating through JSON object with Angular 2 ngFor使用 Angular 2 ngFor 遍历 JSON 对象
【发布时间】：2017-03-26 06:33:35
【问题描述】：

在我写一个服务获取json之前，我只是想用一些dummy 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 吗？

【问题讨论】：

"service to get json" 你的意思是http响应？
我不完全理解你的问题.. 你为什么不在你的模板中使用 jsonSample['content'] ？
您在组件的哪个位置声明var items？您不希望它成为实例属性吗？模板不能获取变量，只能获取组件属性。
@suraj 我没说好。我也在做后端，所以我指的是我会调用来获取 json 的 API。

标签： json angular typescript

【解决方案1】：

就 json 对象遍历而言，您的 *ngFor 看起来不错。这里不需要JSON.parse，直接设置了对象。

在收到来自服务检查here 的响应的情况下。您将使用res.json() 从Response 对象解析和获取json 数据。

【讨论】：

【解决方案2】：

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

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

到

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

【讨论】：