如何使用*ngFor显示json对象-Howtodisplayjsonobjectusing*ngFor

I want to display the below data from Firebase

我想在Firebase中显示以下数据

{
   "-KBN9O_qqz-nZ9tPWFdM":{
      "createdAt":1456399292790,
      "isActive":true,
      "name":"Hero 1"
   },
   "-KBN9gjJw1ZlMgt9pVsl":{
      "createdAt":1456399371220,
      "isActive":true,
      "name":"Hero 2"
   },
   "-KBN9hYI4vYAsyh5k1lX":{
      "createdAt":1456399374548,
      "isActive":true,
      "name":"Hero 3"
   }
}

when doing angular.io Tour of Heroes tutorial for example

在做angular.io Tour of Heroes教程时，例如

  {{hero.id}} {{hero.name}}

So hero id should show for example -KBN9hYI4vYAsyh5k1lX and hero name should show for example hero 3

所以英雄id应该显示例如-KBN9hYI4vYAsyh5k1lX和英雄名称应该显示例如英雄3

I have done some research and come across this stackoverflow solution by @Thierry Templier access key and value of object using *ngFor

我做了一些研究，并通过@Thierry Templier使用* ngFor访问密钥和对象的值来遇到这个stackoverflow解决方案

(1) Is this the right solution to my problem?

（1）这是解决我问题的正确方法吗？

(2) Is there a simpler solution to this problem because I feel that it would be really common for developers using Angular2 to display such json data.

（2）是否有一个更简单的解决方案，因为我觉得使用Angular2的开发人员显示这样的json数据是很常见的。

3 个解决方案

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

           
  Key: {{entry.key}}, value: {{entry.value}}

export class IterateOverObject {
    public arrayOfKeys;

    @Input heros;
    constructor() {
        this.arrayOfKeys = Object.keys(this.heros);
    }
}


  {{key}} {{heros[key].name}}

  {{hero.$key}} {{hero.name}}