FirebaseObjectObservable 속성을 각도로 배열로 반복하는 방법은 무엇입니까?

Question

내 Firebase 데이터베이스에있는 groups 개체의 users 속성에서 *ngFor을 실행할 수 있기를 원합니다.

지금까지,이 노력하고있어 나는 위의 마크 업을 시도 할 때

"groups": { 
    "marketing": { 
    "apps": { 
     "someid": { 
     "id": "someid", 
     "name": "Payroll" 
     } 
    }, 
    "id": "marketing", 
    "name": "Marketing", 
    "users": { 
    "23948n": { 
     "id": "23948n", 
     "email": "someemail@domain.com" 
     }, 
    "asdfasdfasdf": { 
     "id": "asdfasdfasdf", 
     "email": "someemail@domain.com" 
     } 
    } 
    } 
} 

, 내가 얻을 : group$ = getGroup(): FirebaseObjectObservable<any>;

그리고 데이터의 구조는 다음과 같습니다

<h5>{{ (group$ | async)?.name }}</h5> 
<div class="gd-users-container"> 
    <span *ngFor="let user of (group$ | async)?.users">{{ user.email }}</span> 
</div> 

그룹의 이름을 되돌려 놓았지만 *ngFor의 경우 오류가 발생합니다.

group 개체의 users 속성이 배열이 아니기 때문에 오류가 발생하는 이유는 저에게 의미가 있습니다. 내 질문은 users 속성 배열로 처리 할 수 ​​있도록 그것을 얻는 방법입니다.

Answer 1

이 컨텍스트에서는 비동기 파이프가 필요하지 않습니다. 오류 상태로, *ngFor은 반복 가능 객체에 바인딩 할 수 있지만, 무엇 async pipe does is :

은 그래서 당신은

를 방출 한 최신 값 피 감시 또는 약속과 반환에 비동기 파이프 구독을 iterable을 얻지 마십시오. 대신 다음을 사용하십시오.

*ngFor="let email of emails" 

편집 : 아니요, 배열로 변환하지 않습니다. 당신이 자신을 그렇게 할 필요가 있으므로 위와 같이, 그것은으로, 반복 가능 소요 말 : 당신이 원하는대로

let emails: []; 
Object.keys(group$?.users).map(key => emails.push(group$?.users[key].email))) 

는, 배열에 추가 속성 또는 전체 사용자 개체를 추가합니다.

let users = Object.values(group$.users) 

여호수아의 원래 <div *ngFor = "let user of users">{{user?.email}}</div>

Answer 2

응답 : ES7의 Object.values()에서 exaxmple 위해, 그래서

을, 나는 결국 무엇 group 객체에 가입하고 별도의 users$를 생성하고 group.users에 할당 된 모델 :

this.group$ = this.route.paramMap 
    .switchMap((params: ParamMap) => 
    this.gs.getObjectObservable(params.get('id'))); 

this.group$.subscribe(snapshot => { 
    this.users$ = Object.values(snapshot.users); 
}); 

는 그럼 난 것처럼 데이터를 표시 :

<div *ngFor="let user of users$"> 
    {{ user.email }} 
</div> 

이 그것을 할 수있는 최선의 방법인지 확실하지,하지만 가장 쉬운 것 같다. 또한 구독 및 "스냅 샷"에 대한 이해에서부터 정상적으로 작동합니다.