typescript - 如何使用 *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 的英雄之旅教學時

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

所以英雄 ID 應該顯示例如 -KBN9hYI4vYAsyh5k1lX，英雄名稱應該顯示例如 英雄 3

我做了一些研究，並遇到了這個由 @Thierry Templier 提出的 stackoverflow 解決方案，使用 *ngFor 訪問對象的鍵和值

(1) 這是我問題的正確解決方案嗎？

(2) 有沒有一個更簡單的方法來解決這個問題，因為我覺得對於使用 Angular2 的開發者來說，顯示這種 JSON 資料會非常常見。

答案＃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 訪問對象的鍵和值

答案＃2

你可以把鑰匙放入陣列中，然後用 ng-repeat 遍歷這些鑰匙。

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>

這對我來說看起來很簡單.. 更多資訊在這裡