ionic3 - 错误错误:未捕获(承诺):错误:InvalidPipeArgument:'[object Object]' for pipe'AsyncPipe'

2022-01-21 00:00:00 javascript ionic-framework ionic3 typescript

在测试评论功能已经工作之后，我用 ionic3 用 firebase 做了一个新闻评论功能，但是当我想在我的项目中显示评论时出现错误.

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.

错误错误:未捕获(承诺):错误:InvalidPipeArgument:管道AsyncPipe"的[object Object]"

ERROR Error: Uncaught (in promise): Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

我的项目遵循此教程.

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 文件

 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: ['确认']
    });
}

更新:

  getContactsList() {
    return this.angularfiredb.list('/contactsList/');
  }

推荐答案

你需要先将 AngularFireList 转换为 Observable:

You need to first convert the AngularFireList to an Observable :

contactsList: Observable<any[]>;

在你的构造函数中，你需要调用 valueChanges() .这是从 AngularFire2 版本 5 开始的.

And in your constructor, you need to call valueChanges() on it. This is since AngularFire2 Version 5.

this.contactsList = this.firebaseService.getContactsList().valueChanges();

这将通过不带 $key 或 $value 的 observable 返回数据.为了在 html 中打印，请使用

This will return the data through the observable without $key or $value. In order to print in html,use

  {{contact}}

而不是

  {{contact.$value}}

相关文章