使用 AngularFirebase / ionic2 将属性映射到 observable答案

【问题标题】：Map property to observable with AngularFirebase / ionic2使用 AngularFirebase / ionic2 将属性映射到 observable
【发布时间】：2017-04-11 11:36:38
【问题描述】：

我在渲染映射到可观察对象的数据时遇到问题。

这就是我的代码的样子：

// ChatService.ts
getChats() {
    return this.authService.getUid().then(uid => {
        let chats = this.af.database.list(`/users/${uid}/chats`);
        return chats;
    });
}

// Chatcomponent.ts
chats: FirebaseListObservable<any[]>;

this.chatService.getChats()
    .then(chats => {
        this.chats = chats.map(users => {
            return users.map(user => {
                user.info = this.af.database.object(`/users/${user.$key}`)
                return user;
            });
        });
    })

//The HTML File
// chat.html
<ion-item-sliding *ngFor="let chat of chats | async" (click)="openChat(chat.$key)">
  <p>{{chat.$key}}</p>
  <span>{{(chat.info| async).displayName}}</span>
</ion-item-sliding>

现在在渲染页面时，它会正确显示 chat.$key，但 chat.info.displayName 不会渲染。

我在这里做错了什么？

【问题讨论】：

<span>{{(chat.info| async).displayName}}</span> 为什么要再次使用异步？循环内不需要它
谢谢，我不知道。但是更改为 {{chat.info.displayName}} 没有任何区别。数据仍未呈现。
console.log(chats) in getChats() 打印什么？也许您没有从服务器端获取显示名称
地图功能一直有效，直到到达这一行：user.info = this.af.database.object(/users/${user.key})。 user.key 可用，但似乎没有添加 info 属性。

标签： javascript firebase firebase-realtime-database ionic2 angularfire2

【解决方案1】：

问题出在 html 模板中。

我将 {{(chat.info | async).displayName}} 更改为 {{(chat?.info | async)?.displayName}}

【讨论】：