Angular-如何正確使用Promise而不是setTimeOut

我正在嘗試一個接一個地呼叫 call 2 函式，如果我使用setTimeOut它，它會按預期作業。但我正在嘗試更改代碼以使用Promises. 以下是我的代碼的一部分

    public getCustomFieldsData() {
        return new Promise<void>((resolve, reject) => {
          this.originalData = [];
          this.customFieldsService.getCustomFields(this.columnList, this.pageNumber, this.pageSize, null).subscribe(res => {
            if(res) {
              this.ngxSpinner.hide();          
              this.cfData = res;
              this.originalData = this.cloneData(this.cfData.customAttributes);         
              this.gridData = {
                  data: this.cfData.customAttributes,
                  total: this.cfData.totalCount
              }        
            }
          });
          resolve();
        });
    } 

    public editRows(grid) { 
          this.formGroups.markAllAsTouched(); 
          (this.formGroups.get('items') as FormArray).clear();
          let currentRow = (this.pageNumber - 1) * 20;
          let rows: any = grid.data.data;
          
          for (let i = 0; i < rows.length; i  ) {
            const formGroup = this.createFormGroup(rows[i]);
            this.formGroup = formGroup;
            (this.formGroups.get('items') as FormArray).push(formGroup);        
            grid.editRow(currentRow, formGroup, {skipFocus: true});
            currentRow  ;
          }
    } 

    public confirmSave(shouldSave: any, grid): void { 
      if (shouldSave == false) {
        // this.getCustomFieldsData();
        // setTimeout(() => {
          // this.editRows(grid);
        // }, 500);  
        this.getCustomFieldsData().then(res => this.editRows(grid));
      } 
    }

所以，有 3 個函式，在confirmSave()函式中，我會呼叫其他兩個應該一個接一個執行的函式。首先我需要通過呼叫getCustomFieldsData()方法來獲取資料，當這個函式完成它的執行時，我想呼叫這個editRows()方法。

如果我不使用Promise和使用setTimeOut，它正在作業，但我覺得它不一致。所以，我嘗試使用不起作用的 Promise。我什至在控制臺中也沒有看到任何錯誤。

有人可以建議代碼中是否有任何問題。謝謝。

uj5u.com熱心網友回復：

您應該決議您的Promise內部訂閱功能以使其正常運行：

public getCustomFieldsData() {
        return new Promise<void>((resolve, reject) => {
          this.originalData = [];
          this.customFieldsService.getCustomFields(this.columnList, this.pageNumber, this.pageSize, null).subscribe(res => {
            if(res) {
              this.ngxSpinner.hide();          
              this.cfData = res;
              this.originalData = this.cloneData(this.cfData.customAttributes);         
              this.gridData = {
                  data: this.cfData.customAttributes,
                  total: this.cfData.totalCount
              }        
            }
            resolve(); // <- here the data is received and fields populated
          });
       
        });
    } 

旁注，使用可觀察的管道會使事情變得更容易。

uj5u.com熱心網友回復：

如果你已經有了 Observables，就不需要使用 Promises。考慮以下代碼。

  public getCustomFieldsData(): Observable<any> {

    this.originalData = [];
    return this.customFieldsService.getCustomFields(this.columnList, this.pageNumber, this.pageSize, null)
      .pipe(
        tap((res) => {
          if (res) {
            this.ngxSpinner.hide();
            this.cfData = res;
            this.originalData = this.cloneData(this.cfData.customAttributes);
            this.gridData = {
              data: this.cfData.customAttributes,
              total: this.cfData.totalCount
            }
          }
        })
      );
  }

  public editRows(grid) {
    this.formGroups.markAllAsTouched();
    (this.formGroups.get('items') as FormArray).clear();
    let currentRow = (this.pageNumber - 1) * 20;
    let rows: any = grid.data.data;

    for (let i = 0; i < rows.length; i  ) {
      const formGroup = this.createFormGroup(rows[i]);
      this.formGroup = formGroup;
      (this.formGroups.get('items') as FormArray).push(formGroup);
      grid.editRow(currentRow, formGroup, { skipFocus: true });
      currentRow  ;
    }
  }

  public confirmSave(shouldSave: any, grid): void {
    if (shouldSave === false) {

      this.getCustomFieldsData().pipe(
        tap((grid) => {
          this.editRows(grid);
        })
      ).subscribe();
    }
  }

標籤：有角的 承诺

上一篇：如何使用Angular在URL中傳遞2個變數？

下一篇：錯誤TS2339：型別上不存在屬性“值”