FirebaseObjectObservable의 $ key를 함수

Question

에 전달합니다. Firebase와의 Angular2 통합을 처음 접했기 때문에 내 순진함을 용서해주십시오.

저는 Firebase db에 연결하기 위해 AngularFire2 플러그인을 사용하고 있으며, GitHub 문서를 그대로 따르고 있습니다. toggleClicked를 호출 할 때

<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> 

:

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 : 나는 FirebaseObjectObservable를 검색 할 때 지금까지, 나는이 문서에 설명 된 async 파이프를 사용하여 내 HTML에 표시까지

함수가 ion-checkbox이 클릭되면, 전달하고자하는 첫 번째 매개 변수는 멤버의 키이며 전체 멤버가 아닙니다 (표시된대로). 이것은 member.$key을 사용하는 것처럼 문서의 here에 설명되어 있지만 undefined을 반환합니다.

내가 사용 async 파이프를 사용하여 키를 다시 표시 할 수 있습니다 : 당신이 거기에 파이프를 가질 수 없습니다로
(member | async).$key

그러나, 나는이 인수 목록에서이 작업을 수행 할 수 없습니다.

EDIT :

_tripMembers 단지 FirebaseObjectObservable 년대 보유 기본 JS 배열이다. member은 firebase의 개별 항목이므로 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">

편집 :

당신은 그들이 당신의 템플릿을 만들고, 전에 코드 측에서 관찰 가능한 "을 풀다"할 수 있습니다

배열로 주위를 통과하거나 누르지 않고 .

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