Reference.push failed: first argument contains undefined in property

Issue

I am trying to send two data (itemName and itemAmout) to firebase database But it gives me the following error:

Error: Reference.push failed: first argument contains undefined in property 'shoppingItem.itemName'

I don't know where the problem comes from.

I tried to use this solution Error: Reference.push failed , but what it only takes away the error message without sending the data to my firebase database. Here is my code :

addItem.ts :

import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams } from 'ionic-angular';
    import {ShoppingItems} from '../../models/items.interface';
    import { AngularFireDatabase } from   'angularfire2/database';

    import { AngularFireList } from 'angularfire2/database'; 

    @IonicPage(

      {
        segment :'shoppingList/Add-Item'
      }
    )
    @Component({
      selector: 'page-add-item',
      templateUrl: 'add-item.html',
    })
    export class AddItemPage {

    shoppingItem ={} as ShoppingItems ;
    shoppingListRef$ :AngularFireList<ShoppingItems>;


      constructor(public navCtrl: NavController, public navParams: NavParams,
         private adb:AngularFireDatabase) {

          this.shoppingListRef$=adb.list('/shoppingItem');

      }

      addItem(shoppingItem:ShoppingItems){
        this.shoppingListRef$.push({

          itemName: this.shoppingItem.itemName ,
          itemAmount : Number(this.shoppingItem.itemAmount)  

        });

        //this.shoppingItem={} as ShoppingItems;
        this.navCtrl.pop();

      }

    }

*items.interface.ts : *

export interface ShoppingItems {
    itemName : string ;
    itemAmount : number;

}

addItem.html:

<ion-header>

  <ion-navbar color="dark">
    <ion-title>Add Item</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
<ion-item>
  <ion-label floating>
    item  name
  </ion-label>
  <ion-input type="text" ([ngModel])="shoppingItem.itemName"></ion-input>
</ion-item>

<ion-item>
    <ion-label floating>
      item  amount
    </ion-label>
    <ion-input type="number" ([ngModel])="shoppingItem.itemAmount"></ion-input>
  </ion-item>

<button ion-button block (click)="addItem(shoppingItem)">Add item</button>
</ion-content>

Solution

It took me forever to identify your problem. It's from the ngmodel. Its [()] not ([])

<ion-item>
  <ion-label floating>
    item  name
  </ion-label>
  <ion-input type="text" [(ngModel)]="shoppingItem.itemName"></ion-input>
</ion-item>

<ion-item>
    <ion-label floating>
      item  amount
    </ion-label>
    <ion-input type="number" [(ngModel)]="shoppingItem.itemAmount"></ion-input>
  </ion-item>

Answered By - Melchia