angular - 错误 。InvalidPipeArgument:管道“AsyncPipe”的“[object Object]”。无法从 Firebase 中提取数据
问题描述
我目前正在使用 Angular 5。它给了我一个管道错误。我相信版本之间存在冲突,我猜我提到的视频使用的是角度 4。我刚开始的错误是 Error 。InvalidPipeArgument:管道“AsyncPipe”的“[object Object]”。
这是 .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>
这是 profilepage 的 .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);
}
}
解决方案
最新版本的 Angular Firebase 略有变化。list
等object
不会返回 Observable,因此您需要使用它valueChanges()
来返回 observable。
this.profileData = this.afDatabase.object(`user/${data.uid}`)
到
this.profileData = this.afDatabase.object(`user/${data.uid}`).valueChanges();
推荐阅读
- node.js - 错误无法从节点 js 服务器获取数据以响应服务器
- postgresql - 如何获取 unique_constraint 违规的列名?
- python - When would you use `flatten()` instead of`reshape(-1)`?
- vue.js - 使用 Vue,如何在元素被删除后从屏幕中删除它们?
- python - 如何用用户输入的值填充空列表?
- java - 以编程方式从 Grid 进程生成第二个 Selenium Grid 节点作为另一个进程时的 ParameterException
- sql - 使用外键从另一个表中查询表列
- python - 如何在不更改数字类型的情况下从 excel 创建列表/数组?
- composer-php - Composer 不允许使用逻辑 OR 运算符(|| 双管道)进行多个版本约束
- vue.js - Vue el-form 动态验证