有時用戶多次單擊保存按鈕，它會排隊并提交大量請求并創建多個資料。
我們如何在前端防止即使用戶多次單擊按鈕也只提交一個請求，任何人都知道一個干凈的實作？有哪些技巧？
謝謝。
#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')
}
)
}
uj5u.com熱心網友回復：
有一個使用 rxjs 排氣映射的完美解決方案， 但是您可以在處理呼叫期間簡單地禁用您的按鈕，并在回應到來時再次啟用它
isLoading = false;
saveDeal() {
this.isLoading = true;
...
}
createDispositionDeal(payload:any) {
this._dealService.createDeal(payload)
.subscribe(
res=>{
this.isLoading = false; // here
...
},
err=>{
this.isLoading = false; // here
...
}
)
}
并向您的組件添加一個新輸入 [disabled]="isLoading"
<app-page-section-cards-btn
[disabled]="isLoading"
[btnData]="pageSectionsOptions.btnData.save"
(btnClickEvent)="saveDeal()">
</app-page-section-cards-btn>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/320964.html
標籤：javascript 有角的 打字稿