2016-10-14 3 views
2

ngForループを使用せずにangularfire2からクエリを表示する方法はありますか?私はこれらすべてにHTMLを出力しようとしただけループがangularfire2クエリから単一項目を表示

{{user}} 
{{user | async }} 

{{user.name}} 
{{user.name | async }} 

<h1>{{ (user | async)?.name }}</h1> 

<ul> 
    <li *ngFor="let u of user | async" >{{u.name}}</li> 
</ul> 

データセットが

{ 
    "items" : { 
    "id-1" : { 
     "id" : 1, 
     "name" : "Gambit" 
    }, 
    "id-2" : { 
     "id" : 2, 
     "name" : "Wolverine" 
    } 
    }, 
    "list" : "bob" 
} 

もHTMLにJSONを出力することにより、簡単なことangularfireの使用をデバッグしている作品

this.user = this.af.database.list('items',{ 
    query: { 
    orderByChild: 'id', 
    equalTo: id 
    } 
}) 

、これはanglefire2で動作していないようですが、もう一つはこれをやっていたのですか?

答えて

5

あなたはでそれを行うことができます:

this.user = this.af.database.list('items',{ 
    query: { 
    orderByChild: 'id', 
    equalTo: id 
    } 
}).map((items: Array<any>) => items.find(item => item.id === id)) 

しかし、私はあなたがidを持っている場合は、あなたのデータを再構築することをお勧めしますが、JSONパイプを使用することができ、あなたのテンプレートで出力JSONに

アイテムを直接入手する必要があります:

this.user = this.af.database.object(`items/${id}`) 

オフィシャルドキュメントを確認:Structure Your Database詳細...

+0

ありがとうございます – Mangopop

2

もちろん、.list()は名前が示すようにリストを返すので、ループのみが機能します。

AF2にも.object()メソッドがあります。これは試してみることができます。

users | async | json 
関連する問題