angular - 错误错误 : InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

Question

尝试从 firebase 获取用户配置文件数据然后将其显示在主页上时出现异步错误。我尝试删除 home.html 中的异步，这消除了错误，但未显示任何数据。

InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

home.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database';
import { Profile } from './../../models/profile';


@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {

  profileData: FirebaseObjectObservable<Profile>

  constructor(private afAuth: AngularFireAuth, private afDatabase: AngularFireDatabase,
    private toast: ToastController, public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewWillLoad() {
    this.afAuth.authState.take(1).subscribe(data => {
      if (data && data.email && data.uid) {
        this.profileData = this.afDatabase.object(`profile/${data.uid}`)
      }
      else {
        this.navCtrl.setRoot('LoginPage');
      }
    })
  }
}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p>Username: {{(profileData | async)?.username}} </p>
  <p>Date of Birth: {{(profileData | async)?.birthdate}} </p>
</ion-content>

Answer 1

FirebaseObjectObservable<Profile>不是 async 的类型管道将重新识别。

这里是 AsyncPipe 的源代码链接: https://github.com/angular/angular/blob/5.2.0/packages/common/src/pipes/async_pipe.ts#L43-L145 .

注意第 119 行附近的以下函数:

private _selectStrategy(obj:Observable<any>|Promise<any>|EventEmitter<any>): any {
    if (ɵisPromise(obj)) {
      return _promiseStrategy;
    }

    if (ɵisObservable(obj)) {
      return _observableStrategy;
    }

    throw invalidPipeArgumentError(AsyncPipe, obj);
  }

自 profileData不是 Promise或 Observable , 它正在抛出 invalidPipeArgumentError .您需要将数据转换为标准的 Observable 或 Promise 才能使用 async管道。

您可以使用 .valueChanges() 执行此操作方法(返回 Observable )并更改 profileData 的类型至 Observable .