Angular 5 - 带火力的异步管道

Question

我想将异步管道添加到 Angular Firebase，但我遇到了不知道如何修复的错误：

错误错误: InvalidPipeArgument: '[object Object]' 用于管道 '异步管道'

Firebase NoSQL 数据库：

{
  "boss" : [ null, {
    "isPremium" : true,
    "name" : "John",
    "students" : 10000
  } ],
  "users" : [ null, "user", "user2" ]
}

更新

我已更改组件代码：

user$: AngularFireList<any>;

  constructor(db: AngularFireDatabase) {
    this.user$ = db.list("/users");
  }

html:

<ul>
  <li *ngFor="let user of user$ | async">
    {{ user }}
  </li>
</ul>

我遇到了同样的错误... 在 Angular 版本 4 中它可以工作，但是，如何在 Angular 5.2.0 中修复它？？

Answer 1

async 管道使用 observables 作为参数。该错误清楚地表明user$ 字段不是可观察的。

也许您想订阅db.object() 的valueChanges() observable？

看这里：https://github.com/angular/angularfire2/blob/master/docs/rtdb/objects.md

更新

AngularFireList<any> 似乎不是 Observable，所以你会收到同样的错误。

正如我在 angularfire2 的文档中看到的，list() 方法在最新版本中返回一个对象，该对象具有valueChanges() 方法。考虑通过调用valueChanges() 方法并使用异步管道到生成的可观察对象来更改代码。

更多详情：https://github.com/angular/angularfire2/blob/master/docs/version-5-upgrade.md#50

Answer 2

您收到该错误是因为，async 管道适用于 Observables，而您返回的数据不适用。

您可能希望将代码更改为：

user$: Observable<any[]>;

  constructor(db: AngularFireDatabase) {
    this.user$ = db.list("/users").snapshotChanges();
  }

或者这个：

constructor(db: AngularFireDatabase) {
   this.user$ = db.list("/users").valueChanges();
}