Question

在我们的角度应用中，从控制器我返回了一本字典。如何使用* 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>

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

2 个答案: