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

时间:2018-01-30 06:24:19

标签: javascript typescript ionic-framework ionic3

我使用了fire3和firebase做了一个新闻评论功能,测试评论功能已经完成,但是当我希望我项目中出现的评论出现错误时。

  

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

我的项目遵循此TUTORIAL

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/');
  }

2 个答案:

答案 0 :(得分:2)

您需要先将AngularFireList转换为Observable:

contactsList: Observable<any[]>;

在构造函数中,您需要在其上调用valueChanges()。这是自AngularFire2第5版以来。

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

这将在没有$key$value的情况下通过observable返回数据。 要以html格式打印,请使用

  {{contact}}

而不是

  {{contact.$value}}

答案 1 :(得分:1)

尝试从

更改contactsList声明

contactsList:AngularFireList<any>;

contactsList: Observable<any[]>;

确保您将Observable模块导入为

import { Observable } from 'rxjs/Observable'

此外,您的contactList变量分配应更改为

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

希望这有帮助!