FirebaseListObservable 未填充答案

【问题标题】：FirebaseListObservable not get filledFirebaseListObservable 未填充
【发布时间】：2019-01-31 09:48:47
【问题描述】：

我正在使用 firebase 数据制作一个角度测试项目。我面临的问题是在我的 firebase 数据库中显示数据。我可以将数据推送到数据库，但在我的页面中看不到数据。我在我的角度项目中使用 angularfire2。我似乎错过了什么，但我不知道是什么。下面是我的代码。

这是我的组件.ts

import { Component } from '@angular/core';
import {AngularFireDatabase, AngularFireList} from 'angularfire2/database';
import { FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';
import {Observable} from "rxjs/Observable";

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {

items: FirebaseListObservable<any[]>;

msg: string = '';
constructor(public af: AngularFireDatabase) {
  this.items = af.list('/messages');
}

send(message: string) {
  this.items.push({ message: message });
  this.msg = '';
}
}

这是我的html

  <input type="submit" class="submit" value="Send now" (click)="send(message.value)">
  <div class="details-container" *ngFor="let item of items | async">
    <div class="row">
      <div class="medium-9 columns">
        <p> {{ item.message }} </p>
       </div>
      <div class="medium-3 columns">
        <button>delete</button>
        <button>edit</button>
      </div>
    </div>
  </div>

</div>

这是来自我的 firebase 数据库的数据

【问题讨论】：

控制台中有错误信息吗？
@R.Richards 是的，我得到了这 2 个错误： - 错误：InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' -ErrorContext: DebugContext
如果你将项目声明为普通的 Observable 会怎样？
@DanielArechiga 给出了相同的结果

标签： angular firebase-realtime-database angularfire2 ngfor

【解决方案1】：

我在这里有点困难，但我认为 Angular 不理解异步管道，因为你所拥有的“项目”不是 Observable，所以在 list 方法之后调用 .valueChanges()。

请参阅https://github.com/angular/angularfire2/blob/master/docs/rtdb/lists.md，了解valueChanges() 在您的情况下的工作原理。

我在上面的文档中看到了一些关键差异，在文档中“items”被声明为Observable，因为列表方法返回一个AngularFireList，它甚至不是一个数组。

现在，如果您需要将项目视为一个数组，然后将您的列表转换为可观察的，如下所示：this.items = db.list('items').valueChanges(); 并订阅它并填充您想要的任何数组，尽管当您可以使用异步时这对我来说似乎有点多余管道。

【讨论】：

即使重新创建 angularfire 示例也不起作用