Ionicv2 Angularfire2 v5我无法通过推创建新项目

Question

I have a ionic app and I just updated to the new angularfire2 version 5 where FirebaseListObservable was removed.

Now I initialize like this:

  items: Observable<any>;

  constructor(public navCtrl: NavController, public alertCtrl: AlertController, af: AngularFireDatabase, public actionSheetCtrl: ActionSheetController) {
    this.items = af.list('/items').valueChanges();
  }

Before the removal of FirebaseListObservable i only did

items: FirebaseListObservable<any>;

Before I had the ionic Actionsheet handler to create a new item and just push it to the node of the database:

addItem(){
let prompt = this.alertCtrl.create({
  title: 'Name',
  message: "",
  inputs: [
    {
      name: 'title',
      placeholder: 'Name'
    },
  ],
  buttons: [
    {
      text: 'Cancel',
      handler: data => {
      }
    },
    {
      text: 'Save',
      handler: data => {
        this.items.push({
          title: data.title
        });
      }
    }
  ]
});
prompt.present();}

But the "this.items.push({" function does not work anymore. How can I push new items to the database again?

Before with the FirebaseListObservable it was no problem. The error message I get right now is: _this.items.push is not a function

but somehow I dont find the replacement for it.

fyi: I am not so good with observables and response. So please let me know in Detail if the problem is in there.

Answer 1

You are missing angularfire2 syntax. af.list('/items').valueChanges() returns Observable<{}[]> instead of FirebaseListObservable<any> .

So try with following:

items: Observable<any>;
itemsRef: AngularFireList<{}>;

  constructor(public navCtrl: NavController, public alertCtrl: AlertController, af: AngularFireDatabase, public actionSheetCtrl: ActionSheetController) {
    this.itemsRef = af.list('/items');
    this.items = this.itemsRef.valueChanges();
  }

And then please update add section,

addItem(){
  let prompt = this.alertCtrl.create({
    title: 'Name',
    message: "",
    inputs: [
      {
        name: 'title',
        placeholder: 'Name'
      },
    ],
    buttons: [
      {
        text: 'Cancel',
        handler: data => {
        }
      },
      {
        text: 'Save',
        handler: data => {
          this.itemsRef.push({
            title: data.title
          });
        }
      }
    ]
  });
  prompt.present();
}

I recommend you to read this angularfire2 guide few more. Good luck.