Как добавить атрибуты на стороне клиента в элементы 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; 
     })) 
    } 
} 

UPDATE: working example

При обновлении данных с 3 записи на стороне сервера, шаблон должен обновить. Вы не можете, однако добавить новое сообщение в this.messages на клиенте, вы должны обновить ссылки и обновить сервер таким образом:

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