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

Question

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

请任何人帮助实现相同

Answer 1

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

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

Answer 2

您可以创建一个将对象（字典）映射到包含type的数组的管道： { 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>