等待循環首先完成 - Typescript (Angular)

Question

所以我在這里使用點擊 HTML 頁面觸發了這個代碼：

public salaryConfirmation() {
    const matDialogConfig: MatDialogConfig = _.cloneDeep(GajiIdSettings.DIALOG_CONFIG);
    this.warningNameList = [];

    for(let i=0; i < this.kelolaDataPenggajianInfoDataKaryawanList.length; i++) {
      const positionClassId = this.selectedKaryawanAllData[i].position.positionClass.id;
      const beginYearMonth = this.inputForm.get('bulanBerlaku').value;
      const gajiPokok = this.kelolaDataPenggajianInfoDataKaryawanList[i].gaji;

      this.structureAndSalaryScaleValidationService.getSalaryRange(positionClassId, beginYearMonth, gajiPokok)
        .pipe(takeUntil(this.ngUnsubscribe))
        .subscribe(
          async (result) => {
            this.uiBlockService.hideUiBlock();
            if(result.status == 'warning') {
              if(result.warnings[0].code == 'trxMutasiKaryawan.confirmation.alert') {
                await this.warningNameList.push(this.kelolaDataPenggajianInfoDataKaryawanList[i]);
              }
            }
          },
          (error) => {
            this.uiBlockService.hideUiBlock();
            this.contentAlertService.error(error.errors);
          },
          () => { this.uiBlockService.hideUiBlock(); }
        )
    }

    matDialogConfig.data = this.warningNameList;
    console.log("this.warningNameList.length :", this.warningNameList.length);

    if (this.warningNameList.length > 0) {
      this.save();
    } else {
      this.inputMassalGajiWarningComponentDialogRef = this.dialog.open(InputMassalGajiWarningComponent, matDialogConfig);
      this.inputMassalGajiWarningComponentDialogRef.afterClosed().subscribe(
        (confirm: boolean) => {
          if (confirm) {
            this.save();
          }
        }
      );
    }
  }

問題是，我試圖捕捉 this.warningNameList 變量的長度。 但它總是在結果上顯示“0”。

我知道問題是因為這應該是異步工作的。 但我不知道如何在 typescript 中應用它。 一直在搜索這個案例，但我總是申請失敗。 任何人都可以幫助我嗎？

我已經將 await 放入循環中，但似乎由於放置錯誤而無法正常工作。

我發現的一些參考是這個=> JavaScript async and await in loops

提前致謝

Answer 1

將 await 放入循環不會對您有所幫助。 因為它已經在不同的上下文中運行。

您需要做的可能是在使用 promise 而不是此處的 observable 之后依次鏈接這兩個操作。

你可能可以做這樣的事情，

public async salaryConfirmation() {
    const matDialogConfig: MatDialogConfig = _.cloneDeep(GajiIdSettings.DIALOG_CONFIG);
    this.warningNameList = [];

    for(let i=0; i < this.kelolaDataPenggajianInfoDataKaryawanList.length; i++) {
      const positionClassId = this.selectedKaryawanAllData[i].position.positionClass.id;
      const beginYearMonth = this.inputForm.get('bulanBerlaku').value;
      const gajiPokok = this.kelolaDataPenggajianInfoDataKaryawanList[i].gaji;

      let result = await this.structureAndSalaryScaleValidationService.getSalaryRange(positionClassId, beginYearMonth, gajiPokok)
        .pipe(takeUntil(this.ngUnsubscribe)).toPromise();

      // Transform following data
      // .subscribe(
      //    async (result) => {
      //      this.uiBlockService.hideUiBlock();
      //      if(result.status == 'warning') {
      //        if(result.warnings[0].code == 'trxMutasiKaryawan.confirmation.alert') {
      //          await this.warningNameList.push(this.kelolaDataPenggajianInfoDataKaryawanList[i]);
      //        }
      //      }
      //    },
      //    (error) => {
      //      this.uiBlockService.hideUiBlock();
      //      this.contentAlertService.error(error.errors);
      //    },
      //    () => { this.uiBlockService.hideUiBlock(); }
      //  )
    }

    matDialogConfig.data = this.warningNameList;
    console.log("this.warningNameList.length :", this.warningNameList.length);

    if (this.warningNameList.length > 0) {
      this.save();
    } else {
      this.inputMassalGajiWarningComponentDialogRef = this.dialog.open(InputMassalGajiWarningComponent, matDialogConfig);
      this.inputMassalGajiWarningComponentDialogRef.afterClosed().subscribe(
        (confirm: boolean) => {
          if (confirm) {
            this.save();
          }
        }
      );
    }
  }

就像上面的代碼將 observables 轉換為 promise，不要訂閱它們。 這樣，您也可以將 async await 語法與 obervables 一起使用，盡管了解如何以這種方式處理錯誤。