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

我正在构建一个由 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 中进行此类客户端丰富？

不确定 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;
      }))
  }
}

UPDATE: 工作示例

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

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