FirebaseObjectObservableの$ keyを関数に渡す

Question

私はFirebaseとAngular2の統合を初めて行ったので、私の礼儀を許してください。

私はFirebugデータベースに接続するためにAngularFire2プラグインを使用しており、GitHubドキュメントをそのまま使用しています。

私はFirebaseObjectObservableを取得する際に、今までは、私はドキュメントに記述asyncパイプ使用して、私のHTMLで表示：

To get the object in realtime, create an object binding as a property of your component or service. Then in your template, you can use the async pipe to unwrap the binding.

HTML：

<ion-list *ngFor="let member of _tripMembers"> 
    <ion-item> 
     <ion-avatar item-left> 
      <img src="{{ (member | async)?.photoUrl }}"> 
     </ion-avatar> 
     <ion-label>{{ (member | async)?.firstName }} {{ (member | async)?.lastName }}</ion-label> 
     <ion-checkbox color="positive" [(ngModel)]="member.checked" (click)="toggleClicked(member, !member.checked)" item-right></ion-checkbox> 
    </ion-item> 
</ion-list> 

toggleClickedを呼び出しますion-checkboxがクリックされたときに機能します。最初に渡すパラメータはメンバーのキーであり、フルメンバーではありません（表示されています）。これはmember.$keyを単に使用しているとして文書のhereに記述されていますが、それはundefinedを返します。

私が使用してasyncパイプを使用して、再びキーを表示することができます：あなたはそこにパイプを持つことができないよう
(member | async).$key

しかし、私は、引数リストの中にこれを行うことはできません。

EDIT：

_tripMembersはFirebaseObjectObservable年代を保持しているだけで、基本的なJSの配列です。 memberは火災ベースの個々のアイテムであるため、FirebaseObjectObservableであり、FirebaseListObservableではないと思います。ドキュメントの例では、アイテムのLISTを取得している場合、FirebaseListObservableを使用しています。あなただけの個々の項目を取得している場合は、FirebaseObjectObservableを使用することになり

getUserWithID(userID): FirebaseObjectObservable<any> { 
    return this.af.database.object('users/' + userID); 
} 

setTripMembers(): void { 
    allUsers.forEach((user) => { 
     tripMembersID.forEach((member) => { 
      if (user.$key === member) { 
       tripMembers.push(getUserWithID(user.$key)); 
      } 
     }); 
    }); 


    let modal = this.modalCtrl.create(LocationModal, { 
     name: name, 
     members: tripMembers 
    }); 
} 

これは間違っている、（私は何をやっているされていますか）？個々のアイテムをFirebaseListObservableにする必要がありますか？はいの場合、私はFirebaseObjectObservableがどのようなシナリオで説明されているかを教えてください。

_tripMembersはFirebaseListObservable<FirebaseObjectObservable>である必要がありますか？

Answer 1

すべての場所で非同期を使用しないでください。あなたのコレクションのngForでそれを使用してください。

<ion-list *ngFor="let member of _tripMembers | async">

EDIT：

あなたは彼らがあなたのテンプレートにそれを作る前に、コード側の観測を「アンラップ」にしたい、と周りに渡すか、あなたの配列にそれらを押さずによ。

Take a look at this comment which helped me out when starting with AngularFire。

this.af.database.object('path')は、テンプレートによって自動的にアンラップされて消費されることを意味します。コード側でデータを取得するには、そのコードを購読する必要があります。しかし、購読するだけで、観測可能な状態がライブ状態になります。 take演算子を使用してデータを取得し、観測値を閉じます。

FirebaseObjectObservable & FirebaseListObservableは、テンプレートにデータを表示する簡単な方法です。しかし、いったんそれらを操作し始めると、ObservablesでPOJO/Arraysを作成して、ビューのモデルになるでしょう。 AsyncPipe'`」パイプ用の無効な引数「[オブジェクトのオブジェクト]」：次のエラー `エラーがスローされます

let membersArray = []; 

// your forEach 

this.af.database.object(`path/to/${member}`) 
.take(1) 
.subscribe(member => { 
    console.log(`member`, member); 
    membersArray.push(member); 
}); 

// end of forEach