如何將客戶端屬性添加到FirebaseListObservable中的項目中？

我建立這個火力地堡數據庫結構支持的一個簡單的聊天應用：如何將客戶端屬性添加到FirebaseListObservable中的項目中？

messages: { 
    "-KTjL_oLrKOboa2su2zk": { 
    name: "puf", 
    text: "Look I'm smiling :-)" 
    }, 
    "-KTjNfaNem752ChFBcnC": { 
    name: "puf", 
    text: "And now I'm not smiling" 
    } 
}

我使用Angular2和AngularFire2生成HTML。我從火力地堡數據庫信息的簡單列表在我的控制器：

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>

在火力地堡的JavaScript SDK，這將是類似於：

ref.on('child_added', function(snapshot) { 
    var message = snapshot.val(); 
    if (message.text.indexOf(':-)') >= 0) { 
    message.emoji = ''; 
    } 
    addMessageToHTML(message); 
});

我應該如何在AngularFire2做這樣的客戶端富集？

來源

2016-10-11 Frank van Puffelen

是問題如何從FirebaseListObservable或別的東西獲得數據？ – Sasxa

我不確定。我可以說最好的是我想從FirebaseListObservable中爲每個對象添加一個屬性，以便我可以在我的HTML中顯示該屬性（我剛剛將這個屬性添加到該問題中）。 –

我用工作示例更新了答案。 – Sasxa

不確定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

如果更新與服務器端的第三記錄數據，模板應該更新。在客戶端上但是，您不能添加新的消息給this.messages，你必須重新創建參考和更新服務器方式：

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

來源

2016-10-11 18:40:33 Sasxa

感謝您的回答。自從問起，我的確在尋找使用'map（）'（我不需要添加/刪除項目，只需更改它們）。但不知何故，我無法在FirebaseListObservable：'af.database.list（'messages'）上調用map（）'。map（message => {...'給出'Property'map'不存在於FirebaseListObservable ' –

你必須明確地導入它，默認情況下它不在'Rx.Observable'上，在你的應用程序的早些時候添加'import'rxjs/add/operator/map'';根'app.module.ts'的頂部例如 – Sasxa

AngularFire2的'list'發出一個數組值 - 它不會壓扁數組內容 - 所以你需要在你的RxJS'map'中使用'Array.prototype.map'。 – cartant

如何將客戶端屬性添加到FirebaseListObservable中的項目中？

回答

相關問題