如何使用*ngFor显示json对象

Question

我想从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访问密钥和对象值来遇到这个stackoverflow解决方案

(1)这是解决我问题的正确方法吗？

(2)这个问题是否有一个更简单的解决方案,因为我觉得使用Angular2的开发人员显示这样的json数据真的很常见.

Answer 1

您需要实现自定义管道才能执行此操作.ngFor只支持数组而不支持对象.

这个管道看起来像这样:

@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访问键和对象的值

Answer 2

您可以将键放在一个数组中并重复键.

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>

这对我来说很简单..更多信息在这里

Answer 3

Firebase ID称为$ .key。另外，＃现在更改为let。这将为您工作：

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