RXJS & Angularfire mapping не работает

Question

Я пытаюсь сопоставить 2 вызова Firebase. Я использую AngularFire2 и RXJS. Я получаю список с идентификаторами и я хочу, чтобы получить объект с этим ID

const path = `/lists/${auth.$uid}`; 
this.lijsten = map.call(af.database.list(path), (vals: any[]) => { 
    return vals.map((m) => { 
     m.shapes = af.database.object(`/lists/${m.$key}`); 
     return m; 
    }); 
}); 

Это не работает для дополнительной firebase вызова. Вызов работает, но он не может конвертироваться в JSON. Если я заменил его на String, он будет работать. я получил этот пример из видео YouTube с углового https://youtu.be/ngnSOTSS8Q8?t=1h11m48s

Но когда я использую этот пример я не могу преобразовать его в JSon

lijsten | async | json 

дает

Преобразование круговую структуру JSON на JSON.stringify()

Есть ли лучший способ для отображения?

---

Update

я нашел, когда я использую подписываться, он работает

af.database.object(`/lists/${m.$key}`).subscribe(
     val => {  
     m.shapes = val; 
     }); 

Но все-таки, это лучший способ?

Answer 1

Вы можете использовать трубу async дважды, одну для наблюдаемого list и другую для наблюдаемого object.

<div *ngFor="let list of lijsten | async"> 
    {{ list.shapes | async | json }} 
</div>