使用角度排氣貼圖防止多次提交

什么是最佳實踐或如何使用排氣 Matp 來防止多次提交？例如，當用戶向 SAVE 按鈕發送垃圾郵件時？例如基于下面的示例代碼，我們如何處理它一次只提交 1 個，即使是用戶垃圾郵件或單擊保存按鈕一百次。謝謝。

我們如何在下面的 ff 代碼上應用排氣圖，以便即使用戶多次點擊按鈕，只有 1 個請求會發送，即使用戶發送垃圾郵件點擊保存。

#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>

#ts 代碼

 saveDeal(){
    this.isLoading = true;
    if(!this.isExistingDeal){     
      const dealTypeValues = {
        "id": 0,
        "name": this.dealPLSFormFields.dealName,
        "summary": this.dealPLSFormFields.summary,
        "mlasId": this.dealPLSFormFields.partner,
        "startDate": "estimatedOtherRevenue":this.dealPLSFormFields.estimatedOtherRevenue,
        "descriptionOfOtherRevenue":this.dealPLSFormFields.descriptionOfOtherRevenue,
        "totalMonthlyRentAndFees":this.dealPLSFormFields.totalMonthlyRentAndFees,
        "buildOutCostReimbursement":this.dealPLSFormFields.buildOutCostReimbursement,
        "dealId": 0,
        "startDateString": AppUtils.convertDateStringToYYYYMMDD(this.dealPLSFormFields.startDate),
        "endDateString":  AppUtils.convertDateStringToYYYYMMDD(this.dealPLSFormFields.endDate),
      } 
     
      const payload = {
        "id": 0,
        "name": this.dealPLSFormFields.dealName,
        "dealType": "Partner Location Submission",
        "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._dealService.createDeal(payload)
      .pipe(debounceTime(500))
      .subscribe(
        res=>{
          this.isLoading = false;
          this._notificationService.showSuccess('Deal was successfully created.');
          if(res.isSuccess){
            this.refreshDealDetailsPage(res.data);
          }  
        },
        err=>{
          console.log('Error creating deal')
        }
      )
    }else{

      const dealTypeValues = {
        "id": this.dealData.dealTypeValues.id,
        "name": this.dealPLSFormFields.dealName,
        "summary": this.dealPLSFormFields.summary,
        "mlasId": this.dealPLSFormFields.partner,
        "startDate": AppUtils.convertDateStringToYYYYMMDD(this.dealPLSFormFields.startDate),
        "endDate": AppUtils.convertDateStringToYYYYMMDD(this.dealPLSFormFields.endDate),
        "securityMonitoringMonthly": this.dealPLSFormFields.securityMonitoringMonthly,
        "rent": this.dealPLSFormFields.rent,
        "cam": this.dealPLSFormFields.cam,
        "supportServicesFee": this.dealPLSFormFields.supportServicesFee,
        "estimatedOtherRevenue":this.dealPLSFormFields.estimatedOtherRevenue,
        "descriptionOfOtherRevenue":this.dealPLSFormFields.descriptionOfOtherRevenue,
        "totalMonthlyRentAndFees":this.dealPLSFormFields.totalMonthlyRentAndFees,
        "buildOutCostReimbursement":this.dealPLSFormFields.buildOutCostReimbursement,
        "dealId": this.dealData.dealTypeValues.dealId,
        "startDateString": AppUtils.convertDateStringToYYYYMMDD(this.dealPLSFormFields.startDate),
        "endDateString":  AppUtils.convertDateStringToYYYYMMDD(this.dealPLSFormFields.endDate),
      } 

      const payload = {
        "id": this.dealData.id,
        "name": this.dealPLSFormFields.dealName,
        "dealType": "Partner Location Submission",
        "annualRentProposed": null,
        "annualRentCurrent": null,
        "firmTermRemaining": null,
        "firmTermAdded": null,
        "maxAvailableTerm": null,
        "status": this.dealData.status,
        "capitalContribution": null,
        "parentCloneId": null,
        "accountId": this.currentAccount.accountId,
        "transactionId": this.transactionData.id,
        "dealTypeValues": JSON.stringify(dealTypeValues)
      }
      
      this._dealService.updateDeal(payload)
      .pipe(debounceTime(500))
      .subscribe(
        res=>{
          if(res.isSuccess){
            this.isLoading = false;
            this.refreshDealDetailsPage(res.data);
          }  
        },
        err=>{
          this.isLoading = false;
          console.log('Error updating deal')
        }
      )
    }
  }
}

uj5u.com熱心網友回復：

任何一個：

• 創建一個在資料更改和保存時翻轉的布林值
• 持有一個物件，lastSaved在記憶體中與要保存的物件進行比較

然后使用其中任何一個來檢查是否需要在實際保存之前進行保存。

標籤：有角的 打字稿

上一篇：如何在Angular中安排任務

下一篇：您如何修復“型別'typeofimport”上不存在“屬性''”錯誤？