angular - Ionic3、Angular 和 Firebase 从 db 获取

Question

在聊天应用程序上工作。将消息推送到数据库工作正常，但获取查询似乎不起作用。

ts 文件看起来像这样，发送消息工作推送到数据库，工作正常。获取消息不起作用。

ngOnInit(){
  this.encryptedMessages = this.getMessage();
}

getMessage(){
  return this.db.list('/messenger');
}

sendMessage(){
  this.db.list("/messenger").push({
  username: this.username,
  message: this.message
 }).then(()=>{
  //what happens once message is sent
 });
}

html 看起来像这样。使用 *ngFor 和异步管道显示从数据库检索到的所有消息。屏幕上没有渲染

<ion-content padding>
  <div id="message" *ngFor="let m of encryptedMessages | async">
    <div class="username">{{ m.username }}</div>
    <div class="message"> {{ m.message }} </div>
  </div>
</ion-content>

标签： angularfirebasefirebase-realtime-databaseionic3angularfire2

Answer 1

您还必须订阅您的列表。

ngOnInit(){
  this.getMessage().snapshotChanges()
    .subscribe((actions) => {
       this.encryptedMessages = actions.map((action) => {
          const data = action.payload.val();
          data.key = action.key;
          return data;
       });
    });
}

getMessage(){
  return this.db.list('/messenger');
}