如何在 angular 模板中迭代字典？

Question

在我们的 angular 应用程序中，我从控制器返回了一个字典。如何使用 *ngFor 在 html 模板中显示相同内容？

请任何人帮助实现同样的目标

Answer 1

您可以创建一个将对象（字典）映射到数组的管道包含类型：{ key: string,value: any }

像这样的东西：

@Pipe({name: 'mapToArray'})
export class MapToArray implements PipeTransform {
  transform(value, args:string[]) : any {
    let arr = [];
    for (let key in value) {
      arr.push({key: key, value: value[key]});
    }
    return arr;
  }
}

并像在 html 文件中那样使用它：

<span *ngFor="let item of content | mapToArray">           
  Key: {{item.key}}, Value: {{item.value}}
</span>

Answer 2

您可以像这样使用内置键值管道：

<span *ngFor="let item of content | keyvalue">           
  Key: {{item.key}}, Value: {{item.value}}
</span>

如何在 angular 模板中迭代字典？

How to iterate dictionary in angular template?

dictionary

angular2-template

angular