在Angular 2中使用Ngfor迭代JSON对象

Question

我是一名有用的助手，可以为您翻译文本。

我在Ngfor中遍历json对象时遇到了问题，以下是我的模板：

模板：

<h1>Hey</h1>
  <div>{{ people| json}}</div>
  <h1>***************************</h1>
  <ul>
    <li *ngFor="#person of people">
        {{
          person.label
        }}
    </li>
 </ul>

people是我要遍历的json对象，我获取到的结果为(people | json)，而不是列表，请看截图:

最后，这是JSON文件的一部分:

{
"actionList": {
"count": 35,
"list": [
    {
    "Action": {
        "label": "A1",
        "HTTPMethod": "POST",
        "actionType": "indexation",
        "status": "active",
        "description": "Ajout d'une transcription dans le lac de données",
        "resourcePattern": "transcriptions/",
        "parameters": [
            {
                "Parameter": {
                    "label": "",
                    "description": "Flux JSON à indexer",
                    "identifier": "2",
                    "parameterType": "body",
                    "dataType": "json",
                    "requestType": "Action",
                    "processParameter": {
                        "label": "",
                        "description": "Flux JSON à indexer",
                        "identifier": "4",
                        "parameterType": "body",
                        "dataType": "json",
                        "requestType": "Process"
                    }
                }
            },

please feel free to help me

- Anna

Answer 1

你的people对象不是一个数组，因此您无法直接迭代它。

有两个选项：

• 您想要迭代子属性。例如：

<ul>
  <li *ngFor="#person of people?.actionList?.list">
    {{
      person.label
    }}
  </li>
</ul>

• 您想迭代对象的键。在这种情况下，您需要实现一个自定义管道：

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    if (!value) {
      return value;
    } 

    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    } 
    return keys;
  } 
} 

并且这样使用：

<ul>
  <li *ngFor="#person of people | keys">
    {{
      person.value.xx
    }}
  </li>
</ul>

更多详细信息请参见此答案：

• 如何使用*ngFor显示JSON对象

- Thierry Templier

---

非常感谢您，Thierry。我已经按照您的建议添加了管道到我的模板中，并像这样调用它，但仍然没有得到任何结果：

{{ msg.value.Action.label }}

例如，在每个操作节点下获取所有标签。 - Anna

当我像这样尝试时：<li *ngFor="#obj of lists "> {{ obj.value.list[0].Action.label }} </li> 我得到的标签是：A120，而不是第一个标签A1，并且我只得到了一个元素而不是列表，这正常吗？ - Anna

我尝试像这样将索引添加到其中，但它没有起作用：<li *ngFor="#obj of lists | keys, #i=index "> {{ obj.value.list[i].Action.label }} </li> // 我如何在列表内传递索引值？ - Anna