InvalidPipeArgument：管道“AsyncPipe”的“[object Object]”答案

【问题标题】：InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'InvalidPipeArgument：管道“AsyncPipe”的“[object Object]”
【发布时间】：2018-05-11 18:36:06
【问题描述】：

在服务中声明如下：

public currentDBUserBS$: any;

constructor(private afDb: AngularFireDatabase){}

fetchUser(uid){
  this.afDb.object(`users/${uid}`).valueChanges().subscribe((dUser) => {
    if (dUser) {
      this.currentDBUserBS$ = dUser;
    }
  });
}

现在尝试在模板中使用

template: `<li *ngIf="(authService.currentDBUserBS$ | async)?.role=='admin'"> Something </li>`

错误堆栈：

ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'
    at invalidPipeArgumentError (common.js:4219)
    at AsyncPipe._selectStrategy (common.js:5630)
    at AsyncPipe._subscribe (common.js:5612)
    at AsyncPipe.transform (common.js:5586)
    at Object.View_AppNavigatorComponent_0._co [as updateDirectives] (AppNavigatorComponent.html:40)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14339)
    at checkAndUpdateView (core.js:13508)
    at callViewAction (core.js:13858)
    at execComponentViewsAction (core.js:13790)
    at checkAndUpdateView (core.js:13514)

【问题讨论】：

stackoverflow.com/a/44868715/3055401

标签： angular firebase-realtime-database observable

【解决方案1】：

订阅操作后必须添加.valueChanges();。如下图所示：

 this.courses$=db.list('/courses').valueChanges();

【讨论】：

【解决方案2】：

您正在向 currentDBUserBS$ 提供您从 Firebase 获取的对象，而不是 Observable。如果你想这样做，你必须删除模板中的| async。

但是，您可以执行以下操作：

fetchUser(uid){
  this.currentDBUserBS$ = this.afDb.object(`users/${uid}`).valueChanges();
}

.valueChanges() 为您提供一个 observable，并在发出新值或修改现有值时自动更新。

【讨论】：

好的，但是这两种方法有什么区别吗？在这两种情况下，我都会从 db 对我的模板进行异步更新，对吗？
@ishandutta2007 结果几乎是一样的。 | async 用于订阅模板中的 Observable / BehaviorSubject / Subject。当发出一个新值时，Angular 将收到更改通知。使用.subscribe，每个变更检测周期都会对其进行检查。

【解决方案3】：

您正在尝试将数组传递给异步管道而不是 Observable。只需删除异步管道或将 observable 分配给 currentDBUserBS$。

【讨论】：

db.object() 返回对象 db.list() 返回数组