0

I have a button on my html page, on clicking this button data is saved in the database. Sometimes, the same record is saved twice in the database, unable to debug the reason.

My code:

home.html

<button ion-button class="orng_btn" (click)="has_pass()" [disabled]="disabled_kot == true?true:false">Save</button>

home.ts

    has_pass()
    {
       this.disabled_kot = true;

    // calling webservice
    this.user.k_kot(encodeURIComponent(JSON.stringify(this.f_arr))).subscribe(data=>{
    console.log(data,"data");
    this.navCtrl.setRoot('HomePage');
    });
    }

Note that on pressing the button we are using setRoot to refresh the page, is it that this sometimes may be creating 2 instances of this page? Or there is something else we need to do?

halfer
  • 19,824
  • 17
  • 99
  • 186
user2828442
  • 2,415
  • 7
  • 57
  • 105
  • 1
    1. Is there an error that causes the API to get called a second time. 2. Are you clicking it twice? – Nicholas K Sep 16 '19 at 09:33
  • 1
    You could debounce the click event. https://stackoverflow.com/questions/51390476/how-to-prevent-double-click-in-angular – mbojko Sep 16 '19 at 09:38
  • Also you could shorten "[disabled]="disabled_kot == true?true:false" to "[disabled]="disabled_kot" :) – Tim Sep 16 '19 at 09:40
  • @NicholasK no there is no error, it is just saved twice – user2828442 Sep 16 '19 at 09:51
  • @mbojko gone through the link, i think throttle time will be a better option to add, going to try with it – user2828442 Sep 16 '19 at 09:56
  • 1
    There are few posibilites here, is this button part of a form? if so, do you have a submit listener on that form? if yes, the function gets called from the button first time and from the submit callback second time. – Qellson Sep 16 '19 at 11:36

0 Answers0