Question

尝试从firebase获取用户配置文件数据然后在主页上显示时，我收到异步错误。我尝试删除 home.html 中的异步，这消除了错误但没有显示数据。

InvalidPipeArgument：管道'AsyncPipe'的'[object Object]'

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

this.profileData = this.afDatabase.object(`profile/${data.uid}`).valueChanges();

你必须添加.vauleChanges（），这应该清除错误并显示数据。

Answer 2

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来执行此操作。

ERROR错误：InvalidPipeArgument：管道'AsyncPipe'的'[object Object]'

2 个答案: