在 AngularFireObject 中使用异步时出错答案

【问题标题】：Error using async in AngularFireObject在 AngularFireObject 中使用异步时出错
【发布时间】：2018-07-01 18:45:38
【问题描述】：

我在 AngularFireObject 中使用异步时遇到问题。解决办法是什么？

HomePage.ts：

import { AngularFireObject } from 'angularfire2/database';

export class HomePage {

     profileData: AngularFireObject<any>;

     constructor(public authProvider: AuthProvider){}

     ionViewWillLoad(){
        // Here is returning the user logged in correctly
        // and passing data.uid as parameter

        this.authProvider.authState().subscribe(data => {
        this.profileData = this.authProvider.getUserProfile(data.uid);
     })
}

主页.html：

<ion-content padding>
  <p>Nome: {{(profileData | async)?.nome}}</p>
</ion-content>

AuthProvider.ts：

export class AuthProvider {
  constructor(
    private afAuth: AngularFireAuth,
    private afDatabase: AngularFireDatabase) {}

  getUserProfile(data: any) {
    return this.afDatabase.object(`user-profile/${data.uid}`); // returns AngularFireObject

  }

当我尝试在 AngularFireObject 上使用异步时返回以下错误。

Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'
    at invalidPipeArgumentError (http://localhost:8100/build/vendor.js:22387:12)
    at AsyncPipe._selectStrategy (http://localhost:8100/build/vendor.js:23798:15)
    at AsyncPipe._subscribe (http://localhost:8100/build/vendor.js:23780:31)
    at AsyncPipe.transform (http://localhost:8100/build/vendor.js:23754:22)
    at Object.eval [as updateRenderer] (ng:///AppModule/HomePage.ngfactory.js:132:73)
    at Object.debugUpdateRenderer [as updateRenderer] (http://localhost:8100/build/vendor.js:14730:21)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:13866:14)
    at callViewAction (http://localhost:8100/build/vendor.js:14211:21)
    at execComponentViewsAction (http://localhost:8100/build/vendor.js:14143:13)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:13867:5)

【问题讨论】：

标签： html angular typescript firebase ionic3

【解决方案1】：

试试这个

主页.ts

import { AngularFireObject } from 'angularfire2/database';
export class HomePage {

         profileData: AngularFireObject<any>;
         item: any = {};
         constructor(public authProvider: AuthProvider){}

         ionViewWillLoad() {
            this.authProvider.authState().subscribe(data => {

            this.itemRef = this.afDatabase.object(`user-profile/${data.uid}`);
            this.itemRef.valueChanges()
            .subscribe(item => {
                this.profileData  = item;
            });

         })
    }

主页.html

<ion-content padding>
  <p>Nome: {{ profileData?.nome }}</p>
</ion-content>

【讨论】：

返回此错误：错误：未捕获（在承诺中）：TypeError：_this.itemRef.valueChanges 不是函数 TypeError：_this.itemRef.valueChanges 不是函数

【解决方案2】：

valueChanges()方法返回一个Observable，错误不发生但不显示值。

记录保存正确，不明白为什么不显示值。

AuthProvider.ts：

getUserProfile(data: any) {
    // return observable
    return this.afDatabase.object(`user-profile/${data.uid}`).valueChanges();

}

HomePage.ts：

profileData: Observable<any>;

  ionViewWillLoad() {
    this.authProvider.authState().subscribe(data => {
      this.profileData = this.authProvider.getUserProfile(data.uid);
    })
  }

【讨论】：

【解决方案3】：

您的this.profileData 在技术上不是Observable，直到this.authProvider.authState() 已解决。这就是async 管道抛出错误的原因，因为它从一开始就期待Observable。您可以做的是，您可以使用 .switchMap 来转换 Observable，如下所示：

this.profileData = this.authProvider.authState().switchMap(data => {
    return this.authProvider.getUserProfile(data.uid);
})

【讨论】：