错误 。 InvalidPipeArgument：管道“AsyncPipe”的“[object Object]”。无法从 Firebase 中提取数据

Question

我目前正在使用 Angular 5。它给了我一个管道错误。我相信版本之间存在冲突，我猜我提到的视频使用的是角度 4。我刚开始的错误是 Error 。 InvalidPipeArgument: '[object Object]' 用于管道'AsyncPipe'。

这是 .ts 文件

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, List } from 'ionic 
angular';
import { AngularFireAuth } from 'angularfire2/auth';
import {Profile} from '../../model/profile';
import { AngularFireDatabase} from 'angularfire2/database';
import { auth } from 'firebase';
import { UserprofilePage } from '../userprofile/userprofile';

@IonicPage()

@Component({
  selector: 'page-editprofile',
  templateUrl: 'editprofile.html',
})
export class EditprofilePage {

  profile = {}
  as Profile;

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

  ionViewDidLoad() {

  }

  createProfile() {
    this.afAuth.authState.take(1).subscribe(auth => {
      this.afDatabase.object(`user/${auth.uid}`).set(this.profile)
        .then(() => this.navCtrl.setRoot(UserprofilePage))
    })
  }

}

这是显示数据的 .html 文件。

这是个人资料页面

<p> Name : {{(profileData | async) ?. name}}</p>
<p> Location : {{(profileData | async) ?. location}}</p>
<p> Pets : {{(profileData | async) ?. pets}}</p>
<p> Gallery : {{(profileData | async) ?. gallery}}</p>
<p> About me : {{(profileData | async) ?. aboutme}}</p>

这是个人资料页面的 .ts 文件

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 
'ionic-angular';
import { EditprofilePage } from '../editprofile/editprofile';
import { AngularFireDatabase, AngularFireObject } from 
'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import { Profile } from '../../model/profile';
import { auth } from 'firebase';


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





profileData : AngularFireObject<Profile>

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

ionViewDidLoad() {
//console.log('ionViewDidLoad UserprofilePage');
this.afAuth.authState.take(1).subscribe(data => {
  if (data && data.email && data.uid){
    this.toast.create({
      message: `Welcome,${data.email}`,
      duration :3000

    }).present();
    this.profileData = this.afDatabase.object(`user/${data.uid}`)
  }
  else {
    this.toast.create({
      message : `No auth details`,
      duration :  3000
    }).present() ; 
   }
   })


   }

  changeprofile(){
  this.navCtrl.push(EditprofilePage);

  }

  }

The reference video I referred to.

Answer 1

最新版本的 Angular Firebase 略有变化。 list,object 等不会返回 Observable，因此您需要使用 valueChanges() 来返回 observable。

this.profileData = this.afDatabase.object(`user/${data.uid}`)

到

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