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()链接到observable，并在客户端中添加属性：

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中的项添加客户端属性？

1 个答案: