如何将客户端属性添加到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断开连接（upstrem）。 您仍将获得更新（downstrem）。 因此，您可以将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;
      }))
  }
}

更新： 工作示例

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

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