在angular2上迭代Ngfor上的json对象

我有麻烦迭代在Ngfor的JSON对象,有我的模板:

模板:

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

人们是我试图迭代的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" } } }, 

请随时帮助我

你的people对象不是一个数组,所以你可以迭代它开箱即用。

有两个选项:

  • 你想迭代一个子属性。 例如:

     <ul> <li *ngFor="#person of people?.actionList?.list"> {{ person.label }} </li> </ul> 
  • 你想迭代你的对象的键。 在这种情况下,您需要实现一个自定义pipe道:

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