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

因此英雄 ID 应该显示例如 -KBN9hYI4vYAsyh5k1lX英雄名称应该显示为 hero 3

---

我做了一些研究，并通过@Thierry Templier access key and value of object using *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>

有关详细信息，请参阅此问题:

• access key and value of object using *ngFor