在角度 2 中迭代 Ngfor 上的 json 对象

Posted 2023-03-13

【中文标题】在角度 2 中迭代 Ngfor 上的 json 对象

【英文标题】：iteration a json object on Ngfor in angular 2

【发布时间】：2016-09-22 17:30:56

【问题描述】：

我在 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"
                    
                
            ,

请随时帮助我

【参考方案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>

查看此答案了解更多详情：

How to display json object using *ngFor

【讨论】：

非常感谢 thierry，我已经添加了你提到的管道，在我的模板中，我这样称呼它，但仍然没有得到任何东西： msg.value.Action.label // 例如获取每个动作节点下的所有标签

当我这样尝试时： obj.value.list[0].Action.label i我得到标签：A120，而不是第一个标签 A1，我得到的只是一个元素而不是列表，这正常吗？？

我尝试像这样添加索引，但没有成功： obj.value .list[i].Action.label // 我如何在列表中传递索引值？？