I cant update no matter what, its adding new data again and again instead of updating

Ionic Framework ionic-v3
1

My profile.html page data:

<ion-navbar>
  <ion-title>Profile</ion-title>
</ion-navbar>

    <input type="hidden" [(ngModel)]="person.id" />
    <ion-item>
        <ion-label floating>First Name</ion-label>
        <ion-input [(ngModel)]= "person.firstname"></ion-input>
    </ion-item>
    <ion-item>
        <ion-label floating>Last Name</ion-label>
        <ion-input [(ngModel)]= "person.lastname"></ion-input>
    </ion-item>
    <ion-item>
        <ion-label floating>Contact Number</ion-label>
        <ion-input [(ngModel)]= "person.contactnumber"></ion-input>
    </ion-item>
    <button ion-button (click)="createProfile(person.id,person.firstname,person.lastname,person.contactnumber)">
        <span *ngIf="person.id">Update Contact</span><span *ngIf="!person.id">Add Contact</span> 
    </button>

and my profile.ts page data:

import { Component } from ‘@angular/core’;
import { IonicPage, NavController, NavParams } from ‘ionic-angular’;
import { AngularFireAuth } from ‘angularfire4/auth’;
import { AngularFireDatabase,FirebaseListObservable } from ‘angularfire4/database’;
import * as firebase from ‘firebase/app’;

import { HomePage } from ‘…/home/home’;
import { LoggedinPage } from ‘…/loggedin/loggedin’;

@IonicPage()
@Component({
selector: ‘page-profile’,
templateUrl: ‘profile.html’,
})
export class ProfilePage {

persons: FirebaseListObservable<any>;
person = {
    id : '',
    firstname: '',
    lastname: '',
    contactnumber: ''
}


constructor(
  public afDatabase: AngularFireDatabase,
  public afAuth: AngularFireAuth,
  public navCtrl: NavController,
  public navParams: NavParams) {

    
    this.persons = afDatabase.list('/profile');
    this.person.id = this.navParams.get('key');
    this.person.firstname = this.navParams.get('firstname');
    this.person.lastname = this.navParams.get('lastname');
    this.person.contactnumber = this.navParams.get('contactnumber');
    console.log('keys is:',this.person.id);
    console.log('firstname is:',this.person.firstname);
}

ionViewDidLoad() {
  console.log('ionViewDidLoad ProfilePage');
}

createProfile(id, firstname, lastname, contactnumber) {
    if(id) {
        alert('update');
      this.persons.update(id, {
        firstname: firstname,
        lastname: lastname,
        contactnumber: contactnumber
      }).then( newContact => {
        this.navCtrl.pop();
      }, error => {
        console.log(error);
      });
    } else {
        alert('create');
      this.persons.push({
        firstname: firstname,
        lastname: lastname,
        contactnumber: contactnumber
      }).then( newContact => {
        this.navCtrl.pop();
      }, error => {
          console.log(error);
      });
    }
  }

}

Issue: its not updating the existing data, its create new again and again also in my profile.html page
if id exists it should display update contact instead of that it displays Add contact again and again, even when new user is added.

2

Hello,
maybe this is related to some issues reported that onChange does not fire in some conditions. Maybe you could add it by yourself like

(ngModelChange)="onChange($event)"

Log what id is, string with lenght of 0 should imho evaluate to false.

Best regards, anna-liebt

3

thanks for this, it worked, I was doing everything in one page, then I break down the whole functionality in 2 pages and it worked.