問題は、マッピングがまだ完了していないため、chat.name が最初に空白で表示されることです。データを更新する前にマッピングを待つ方法はありますか?
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;
})
});
これがUIです。
<ul>
<li *ngFor="let chat of chats | async">
{{ (chat.name | async)?.name }} : {{ chat.lastMessage }}
</li>
</ul>