如何将客户端属性添加到FirebaseListObservable中的项目中？ [英] How do I add client-side attributes to items in a FirebaseListObservable?

问题描述

 消息：{
 -KTjL_oLrKOboa2su2zk：{
 name：puf，
 text：看我在笑:-)
}，
-KTjNfaNem752ChFBcnC：{
名字：puf，
 text：现在我不是在笑
} 
} 
  

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

  export class AppComponent {
消息：FirebaseListObservable< ;任何[]取代; 
构造函数（public af：AngularFire）{
 this.messages = af.database.list（'messages'）; 
 
 
 $ / code $ / pre 
 
我希望检测每条消息中的特定条件并翻译在我的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 ='
I'm building a simple chat app backed by this Firebase Database structure:
messages: {
  "-KTjL_oLrKOboa2su2zk": {
    name: "puf",
    text: "Look I'm smiling :-)"
  },
  "-KTjNfaNem752ChFBcnC": {
    name: "puf",
    text: "And now I'm not smiling"
  }
}
I'm using Angular2 and AngularFire2 to generate the HTML. I have a simple list of messages from the Firebase Database in my controller: 
export class AppComponent {
  messages: FirebaseListObservable<any[]>;
  constructor(public af: AngularFire) {
    this.messages = af.database.list('messages');
  }
}
I want to detect certain conditions in each message and translate that into an emoji in my HTML. Since this is purely display information derived from the existing content, I don't want to store it in the database.

My HTML template:
<li class="text" *ngFor="let message of messages | async">
  {{message.name}} {{message.emoji}}: {{message.text}}
</li>
In the Firebase JavaScript SDK, this would be akin to:
ref.on('child_added', function(snapshot) {
  var message = snapshot.val();
  if (message.text.indexOf(':-)') >= 0) {
    message.emoji = '
                        
这篇关于如何将客户端属性添加到FirebaseListObservable中的项目中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！