使用Angular 2 ngFor遍历JSON对象

在编写获取json的服务之前，我只想使用一些伪json来测试前端。使用ngFor迭代json的正确方法是什么？我用一个简单的界面尝试了下面的代码

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

var jsonSample={
“名称”：“样本1”，
“内容”：[
{
“id”：“3”，
“名称”：“测试”，
“值”：“45”
}, 
{
“id”：“4”，
“名称”：“Test2”，
“价值”：“60”，
}]
}
变量项：Array=jsonSample.content；

然后在HTML中：

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

{{content.name}小写}
{{content.id}
{{content.value}

---

我应该尝试使用JSON.parse吗？

就JSON对象遍历而言，您的

*ngFor

看起来不错。 您不需要在这里执行

JSON.parse

，因为您已经直接设置了一个对象

---

在从服务检查接收响应的情况下。您将执行

res.json（）

来解析

Response

对象中的json数据

@torazaburo明白了。我只是需要改变一下：

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

---

“获取json的服务”你是指http响应？我不完全理解你的问题。。为什么不在模板中使用jsonSample['content']呢？您在组件中的什么位置声明

var项

？您不希望它成为实例属性吗？模板不能提取变量，只能提取组件属性。@suraj我没有说得那么好。我也在做后端，所以我指的是我将调用以获取json的API。

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

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