Click here to Skip to main content
15,867,867 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am trying to send two data (itemName and itemAmout) to firebase database But it gives me this error:
Quote:
Error: Reference.push failed: first argument contains undefined in property 'shoppingItem.itemName'

I dont know where the probleme come from.
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>


What I have tried:

I tried to use this solution, but what it only takes away the error message without sending the data to my firebase database.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900