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

Ionic Framework ionic-v3
1

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/',{
   query:{
      limitToLast:50
   }
});
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

2

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

1 Like
3

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 !

4

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