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

请随时帮助我

Answer 1

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