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

Question

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.

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

My project follow this TUTORIAL.

html file

<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

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

Before your <ion-list> just try outputting your contactsList variable as json like this, <div>contactsList|json</div> and see if it is a complex object. — David R
– David R, Commented Jan 30, 2018 at 6:27
@SurajRao angularfire2, download from here..github.com/angular/angularfire2 — Yuyang He
– Yuyang He, Commented Jan 30, 2018 at 7:27

Suraj Rao · Accepted Answer · 2018-01-30 07:48:36Z

2

You need to first convert the AngularFireList to an Observable :

contactsList: Observable<any[]>;

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

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

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

  {{contact}}

instead of

  {{contact.$value}}

answered Jan 30, 2018 at 7:48

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David R · Accepted Answer · 2018-01-30 07:59:05Z

1

Try changing your contactsList declaration from

contactsList:AngularFireList<any>;

to

contactsList: Observable<any[]>;

Ensure that you're importing your Observable module as,

import { Observable } from 'rxjs/Observable'

Also your contactList variable assignment should be changed as,

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

Hope this helps!

edited Jan 30, 2018 at 7:59

answered Jan 30, 2018 at 6:41

David R

15.7k8 gold badges59 silver badges74 bronze badges

8 Comments

Yuyang He Over a year ago

But what should I import in my ts file

Yuyang He Over a year ago

error showing: cannot find Observable , and when I import it to angularfire2/database also showing error.

David R Over a year ago

Please import Observable module like this, import { Observable } from 'rxjs/Observable'; and then try again

Yuyang He Over a year ago

Showing error in this.contactsList = this.firebaseService.getContactsList();, should I update my firebase-service providers

Yuyang He Over a year ago

Can not assign type "AngularFireList <{}>" to type "Observable <any []>".    Missing attribute "_isScalar" in type "AngularFireList <{}".

|

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related