Angular 5 - 帶有 firebase 的異步管道

Question

我想將異步管道添加到 angular firebase，但出現錯誤，我不知道如何解決：

錯誤錯誤：InvalidPipeArgument：管道“AsyncPipe”的“[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();
}