web-dev-qa-db-ja.com

* 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とヒーロー名は、たとえばhero 3

私はいくつかの研究を行って、@ Thierry Templierによるこのstackoverflowソリューションに出会いました * ngForを使用してオブジェクトのアクセスキーと値

（1）これは私の問題の正しい解決策ですか？

（2）Angular2を使用してそのようなjsonデータを表示する開発者には本当に一般的だと思うので、この問題に対するより簡単な解決策はありますか。

typescriptfirebaseangular
21
choopage - Jek Bao

これを行うには、カスタムパイプを実装する必要があります。 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>

詳細については、この質問を参照してください。

41
Thierry Templier

キーを配列に入れて、キーを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>

これは簡単に見えます。詳細は here です

7
Siva

Firebase idは$。keyと呼ばれます。また、＃はletに変更されました。これはあなたのために働くでしょう：

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