Question

我当前正在使用角度5。这给了我一个管道错误。我认为版本存在冲突，我猜我所指的视频使用的是角度4。我刚开始遇到的错误是Error。 InvalidPipeArgument：管道“ 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();

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

1 个答案: