如何使用* 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>
