在角度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>

人是我正在尝试迭代的json对象,我有(人| 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"
                    }
                }
            },

请随时帮助我

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对象