1

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>
Puigcerber
  • 9,814
  • 6
  • 40
  • 51
Hey
  • 167
  • 1
  • 10

1 Answers1

1

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 }}

Community
  • 1
  • 1
Aaron Saunders
  • 33,180
  • 5
  • 60
  • 80
  • Actually, I saw that one already a while ago. I can display the value though. It is just that once I push a message, it will stay blank for a few seconds then display the chat.name. – Hey Aug 03 '16 at 15:29
  • i dont have an UI code to review so it is kinda hard to provide any guidance here? – Aaron Saunders Aug 03 '16 at 15:46
  • I just edited my post. Sorry about that. The issue is, at first it will display the last message then after a few seconds it will show the chat.name. Thank you. If I try to wrap it around a div and do a *ngIf, it will annoying for the user when there's a new updates. Thank you – Hey Aug 03 '16 at 16:01