How to display the data of combined list in the html page

Hi guys,

I have two firebase lists and I combined them into one list by using this code

public chatList: FirebaseListObservable<any[]>;
public blockList: FirebaseListObservable<any[]>;
public filteredList: Observable<any[]>;
this.chatList = this.afd.list('/chats/',{
this.blockList = this.afd.list('/blocks/');
this.filteredList = Observable.combineLatest(this.chatList, this.blockList)
  .map(([chats, blocked]) => {
    let filtered: any[];
    ... // Do filtering here

    return filtered;

How can I display the data of the new list in HTML by using *ngfor ?

Note: this is the tree of my two lists

Use the async pipe in your template. Read the source code of the AngularFire sample app.

1 Like

I did that such as this line of HTML code

<div *ngFor="let chat of filteredList | async">

But when I try to display the text of chats with using {{chat.text}}, there’s no data displayed.

Also I checked the code without .map but still no data displayed

this.filteredList = Observable.combineLatest(this.chatList, this.blockList);

I think there is a missing point !

Can any one tell me where is my problem for comination case ?