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データを表示する開発者には本当に一般的だと思うので、この問題に対するより簡単な解決策はありますか。
これを行うには、カスタムパイプを実装する必要があります。 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>
詳細については、この質問を参照してください。
キーを配列に入れて、キーを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 です
Firebase idは$。keyと呼ばれます。また、#はletに変更されました。これはあなたのために働くでしょう:
<li *ngFor="let hero of heroes">
<span class="badge">{{hero.$key}}</span> {{hero.name}}
</li>