如何在迭代角模板字典？

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>