[英]ionic3 - ERROR Error: Uncaught (in promise): Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'
I did a news comment function by ionic3 with firebase, after testing comment function working already, but when I want the comment showing in my project error coming out. 在测试评论功能已经正常工作之后,我用ionic3借助firebase做了一个新闻评论功能,但是当我希望该评论显示在我的项目错误中时。
ERROR Error: Uncaught (in promise): Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' 错误错误:未捕获(承诺):错误:InvalidPipeArgument:管道“ AsyncPipe”的“ [对象对象]”
My project follow this TUTORIAL . 我的项目遵循此TUTORIAL 。
html file html文件
<ion-list>
<ion-item-group *ngFor="let contact of contactsList | async">
<ion-item>
{{contact.$value}}
</ion-item>
</ion-item-group>
</ion-list>
<ion-list>
<ion-row>
<ion-col col-6>
<ion-input type="text" [(ngModel)]="Contact" placeholder="写评论..."></ion-input>
</ion-col>
<ion-col>
<button ion-button color="primary" (click)="addContact()">发布</button>
</ion-col>
</ion-row>
</ion-list>
ts file ts文件
import { AngularFireList } from 'angularfire2/database';
export class NewsDetailPage {
new: any;
contactsList:AngularFireList<any>;
Contact = '';
constructor(public navCtrl: NavController, public navParams: NavParams,
private qq: QQSDK, private socialSharing: SocialSharing,
public firebaseService:FirebaseServiceProvider,public alertCtrl: AlertController
// private photoViewer: PhotoViewer
) {
this.new = navParams.get('new');
this.contactsList = this.firebaseService.getContactsList();
}
addContact() {
this.firebaseService.addContact(this.Contact);
const alert = this.alertCtrl.create({
title: '评论成功!',
//subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
buttons: ['确认']
});
}
UPDATE: 更新:
getContactsList() {
return this.angularfiredb.list('/contactsList/');
}
You need to first convert the AngularFireList to an Observable : 您需要先将AngularFireList转换为Observable:
contactsList: Observable<any[]>;
And in your constructor, you need to call valueChanges()
on it. 在构造函数中,您需要对其调用valueChanges()
。 This is since AngularFire2 Version 5. 这是因为AngularFire2版本5。
this.contactsList = this.firebaseService.getContactsList().valueChanges();
This will return the data through the observable without $key
or $value
. 这将通过不带$key
或$value
的可观察对象返回数据。 In order to print in html,use 为了以html打印,请使用
{{contact}}
instead of 代替
{{contact.$value}}
Try changing your contactsList
declaration from 尝试从更改您的contactsList
声明
contactsList:AngularFireList<any>;
to 至
contactsList: Observable<any[]>;
Ensure that you're importing your Observable
module as, 确保您以以下方式导入Observable
模块,
import { Observable } from 'rxjs/Observable'
Also your contactList
variable assignment should be changed as, 同样,您的contactList
变量分配也应更改为
this.contactsList = this.firebaseService.getContactsList().valueChanges();
Hope this helps! 希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.