如何使用* ngFor显示json对象

我想从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" } } 

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

 <li *ngFor="#hero of heroes"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> 

所以英雄身份证应该显示例如-KBN9hYI4vYAsyh5k1lX和英雄名字应该显示例如hero 3


我已经做了一些研究,并通过@Thierry Templier 访问键和对象的值使用* ngFor碰到这个计算器解决scheme

(1)这是我的问题的正确解决scheme?

(2)这个问题有一个更简单的解决scheme,因为我觉得使用Angular2显示这样的json数据的开发者真的很常见。

您需要实现一个自定义pipe道来执行此操作。 ngFor只支持数组而不是对象。

这条pipe道将如下所示:

 @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; } } 

并像这样使用它:

 <span *ngFor="#entry of content | keys"> Key: {{entry.key}}, value: {{entry.value}} </span> 

看到这个问题的更多细节:

  • 访问键和使用* ngFor的对象的值

你可以把键放在一个数组中,然后重复键。

 export class IterateOverObject { public arrayOfKeys; @Input heros; constructor() { this.arrayOfKeys = Object.keys(this.heros); } } <li *ngFor="#key of arrayOfKeys"> <span class="badge">{{key}}</span> {{heros[key].name}} </li> 

这看起来很简单。更多信息在这里

Firebase ID被称为$ .key 。 此外,#现在更改为 。 这将为你工作:

 <li *ngFor="let hero of heroes"> <span class="badge">{{hero.$key}}</span> {{hero.name}} </li>