CODEWITHSUNDEEP
angularfirebaseobservableangularfire2
Hey
Hey

Reputation: 187

How can I wait for the observable in Angularfire 2?

The problem is that the chat.name display a blank at first because the mapping hasn't been finished yet. Is there any way to wait for the mapping before it updates the data?

this.chats = this.af.database.list('/chats/' + this.mainService.getUserId(), {
  query: {
    orderByChild: 'timestamp'
  }
}).map((chats) => {
    return chats.map( chat => {
        chat.name = this.af.database.object(`/users/${chat.uid}`);
        return chat;
    })
});

Here's the UI.

<ul>
    <li *ngFor="let chat of chats | async">
       {{ (chat.name | async)?.name }} : {{  chat.lastMessage }}
    </li>
</ul>

Upvotes: 1

Views: 956

Answers (1)

Aaron Saunders
Aaron Saunders

Reputation: 33345

see this answer - Nested Observables in Angular2 using AngularFire2 not rendering in view

But I suspect you will need to add the elvis operator to the HTML page

{{ chat?.name }}

Upvotes: 1

Related Questions