如何在角度模板中迭代字典？

Posted 2023-03-13

【中文标题】如何在角度模板中迭代字典？

【英文标题】：How to iterate dictionary in angular template?

【发布时间】：2018-08-09 09:28:48

【问题描述】：

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

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

【问题讨论】：

Iterate over object in Angular的可能重复

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

【讨论】：

我已经导入了类。我收到以下错误：找不到管道'mapToArray'。

你需要像在你的模块中声明数组中的组件一样声明管道

【参考方案2】：

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

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

【讨论】：

我比投票的答案更喜欢这个答案，因为它使用了内置功能 +1