如何将客户端属性添加到 FirebaseListObservable 中的项目？

Question

我正在构建一个由这个 Firebase 数据库结构支持的简单聊天应用程序：

messages: {
  "-KTjL_oLrKOboa2su2zk": {
    name: "puf",
    text: "Look I'm smiling :-)"
  },
  "-KTjNfaNem752ChFBcnC": {
    name: "puf",
    text: "And now I'm not smiling"
  }
}

我正在使用 Angular2 和 AngularFire2 生成 HTML。我的控制器中有一个来自 Firebase 数据库的简单消息列表：

export class AppComponent {
  messages: FirebaseListObservable<any[]>;
  constructor(public af: AngularFire) {
    this.messages = af.database.list('messages');
  }
}

我想检测每条消息中的某些条件并将其转换为我 HTML 中的表情符号。由于这纯粹是显示从现有内容派生的信息，所以我不想将其存储在数据库中。

我的 HTML 模板：

<li class="text" *ngFor="let message of messages | async">
  {{message.name}} {{message.emoji}}: {{message.text}}
</li>

在 Firebase JavaScript SDK 中，这类似于：

ref.on('child_added', function(snapshot) {
  var message = snapshot.val();
  if (message.text.indexOf(':-)') >= 0) {
    message.emoji = '';
  }
  addMessageToHTML(message);
});

我应该如何在 AngularFire2 中进行这样的客户端丰富？

Answer 1

不确定 JSSDK 中的工作原理，但是当您订阅（使用 async 管道）到 FirebaseListObservable 时，您将与 Firebase 断开连接（上游）；你仍然会得到更新（下游）。因此，您可以将 map() 链接到可观察对象，并在客户端添加属性：

import 'rxjs/add/operator/map'

export class AppComponent {
  messages: FirebaseListObservable<any[]>;
  constructor(public af: AngularFire) {
    this.messages = af.database.list('messages')
      .map(messages => messages.map(message => {
        if (message.text.indexOf(':-)') >= 0) {
          message.emoji = '';
        }
        return message;
      }))
  }
}

更新：working example

如果您在服务器端用第 3 条记录更新数据，模板应该更新。但是，您不能向客户端的 this.messages 添加新消息，您必须重新创建引用并以这种方式更新服务器：

    af.database.list('messages').push({
      name: "new",
      text: "Now I'm sad :-("
      }
    }

如何将客户端属性添加到 FirebaseListObservable 中的项目？

How do I add client-side attributes to items in a FirebaseListObservable?

javascript

firebase

firebase-realtime-database

angularfire2

angular