A veces, el usuario hace clic en el botón Guardar varias veces y se pone en cola y envía una gran cantidad de solicitudes y se crean múltiples datos.
¿Cómo evitamos en el front-end que incluso el usuario haga clic en el botón varias veces, solo se envía una solicitud, alguien conoce una implementación limpia? cuales son las tecnicas
Gracias.
#código HTML
<ng-template #editButtons> <div class="flex" *ngIf="isEditing"> <app-page-section-cards-btn [btnData]="pageSectionsOptions.btnData.cancel" (btnClickEvent)="cancelEdit()"></app-page-section-cards-btn> <app-page-section-cards-btn [btnData]="pageSectionsOptions.btnData.save" (btnClickEvent)="saveDeal()"> </app-page-section-cards-btn> </div> </ng-template> saveDeal(){ const payload = { "id": 0, "name": this.dealDispositionFormFields.dealName, "dealType": "Idle Buyout", "annualRentProposed": null, "annualRentCurrent": null, "firmTermRemaining": null, "firmTermAdded": null, "maxAvailableTerm": null, "status": null, "capitalContribution": null, "parentCloneId": null, "accountId": this.currentAccount.accountId, "transactionId": this.transactionData.id, "dealTypeValues": JSON.stringify(dealTypeValues) } this.createDispositionDeal(payload); } createDispositionDeal(payload:any) { this._dealService.createDeal(payload) .subscribe( res=>{ this._notificationService.showSuccess('Deal was successfully created.'); if(res.isSuccess){ this.refreshDealDetailsPage(res.data); } }, err=>{ console.log('Error creating deal') } ) }hay una solución perfecta usando rxjs exhaustMap pero simplemente puede deshabilitar su botón durante el procesamiento de su llamada y habilitarlo nuevamente cuando llegue la respuesta
isLoading = false; saveDeal() { this.isLoading = true; ... } createDispositionDeal(payload:any) { this._dealService.createDeal(payload) .subscribe( res=>{ this.isLoading = false; // here ... }, err=>{ this.isLoading = false; // here ... } ) }y agregue una nueva entrada a su componente [deshabilitado]="isLoading"
<app-page-section-cards-btn [disabled]="isLoading" [btnData]="pageSectionsOptions.btnData.save" (btnClickEvent)="saveDeal()"> </app-page-section-cards-btn>