角度異步請求回傳空值

在 ngOnchanges 中，我呼叫了 _generateLocationFormForApproval 方法，它的輸出是 this.absoluteUri。呼叫 _generateLocationFormForApproval 后，下一個呼叫是 _pageEventDealsForApprovalList。現在我想從 _generateLocationFormForApproval 訪問結果，其中 this.absoluteUri 在其結果后位于 _pageEventDealsForApprovalList 中，但它給我 undefined 雖然 this.absoluteUri 有一個值。

為什么 this.absoluteUri 在 _pageEventDealsForApprovalList 中未定義？

任何的想法 ？與異步呼叫？謝謝。

＃代碼

  ngOnChanges(changes: SimpleChanges): void {
      if(this.dealId) {
        this._generateLocationFormForApproval();
        this._pageEventDealsForApprovalList();
      }
    }
    
    
    
    private  _generateLocationFormForApproval() {
      this.dealService.generateLocationSubmission(this.dealId)
      .subscribe({
        next: (res) => {
          if (res.isSuccess) {
            this.absoluteUri = res.data.absoluteUri;
          }
        },
        error: err => this.notificationService.showError(err),
        complete: noop,
      });
    }
    
private _pageEventDealsForApprovalList() {
  console.log("1")
  console.log("this.absoluteUrithis.absoluteUri" , this.absoluteUri)
  this.searchInput = '';
  const status = [DEAL.STATUS.FORAPPROVAL, DEAL.STATUS.APPROVED]
  this.dealType = [];
  this.isLoading = true;
  this.dealService
    .getAllDeals(
      status,
      this.accountId,
      this.transaction.id,
      this.table.pageIndex   1,
      this.table.pageSize,
      this.searchInput,
      this.table.sortParams,
      this.table.sortDirs,
      this.dealType
    )
    .pipe(finalize(() => (this.isLoading = false)))
    .subscribe((res) => {
        if(res) {
          console.log("this.uri" , this.absoluteUri)
        }
    }, (err) => this.notificationService.showError(err)
  );
}

uj5u.com熱心網友回復：

嘗試使用Promise異步呼叫兩個 API。

使用此代碼

    ngOnChanges(changes: SimpleChanges): void {
      if(this.dealId) {
        this._generateLocationFormForApproval().then((data)=>{
        console.log(data)
        if(data)
          this._pageEventDealsForApprovalList();
        }
      }
    }
    
    
    
    private  _generateLocationFormForApproval() {
       return new Promise((resolve,reject)=>{
          this.dealService.generateLocationSubmission(this.dealId)
          .subscribe({
            next: (res) => {
              if (res.isSuccess) {
                this.absoluteUri = res.data.absoluteUri;
                resolve(this.absoluteUri);
              }
            },
            error: err => {
                  this.notificationService.showError(err);
                  reject(err)
            },
            complete: noop,
          });
      })
    }
    
private _pageEventDealsForApprovalList() {
  console.log("1")
  console.log("this.absoluteUrithis.absoluteUri" , this.absoluteUri)
  this.searchInput = '';
  const status = [DEAL.STATUS.FORAPPROVAL, DEAL.STATUS.APPROVED]
  this.dealType = [];
  this.isLoading = true;
  this.dealService
    .getAllDeals(
      status,
      this.accountId,
      this.transaction.id,
      this.table.pageIndex   1,
      this.table.pageSize,
      this.searchInput,
      this.table.sortParams,
      this.table.sortDirs,
      this.dealType
    )
    .pipe(finalize(() => (this.isLoading = false)))
    .subscribe((res) => {
        if(res) {
          console.log("this.uri" , this.absoluteUri)
        }
    }, (err) => this.notificationService.showError(err)
  );
}

 

uj5u.com熱心網友回復：

在這種情況下，我建議使用RxJs 的 switchMap函式。

你會做一些類似的事情（警告：未測驗）：

ngOnChanges(changes: SimpleChanges): void {
  // It was originally this, but if you're looking for changes to the dealId you should use changes.dealId instead
  if (changes.dealId) {
    this.dealService.generateLocationSubmission(this.dealId)
      .pipe(
        switchMap(res => {
          if (!res.isSuccess) {
            return of(res);
          }
          this.absoluteUri = res.data.absoluteUri;
          return this._pageEventDealsForApprovalList(this.absoluteUri);
        }),
        finalize(() => (this.isLoading = false))
      )
      .subscribe(
        res => {
          if (res) {
            console.log('this.uri', this.absoluteUri);
          }
        },
        err => this.notificationService.showError(err)
      );
  }
}

private _pageEventDealsForApprovalList(absoluteUri): Observable<any> {
  console.log('1');
  console.log('this.absoluteUrithis.absoluteUri', this.absoluteUri);
  this.searchInput = '';
  const status = [DEAL.STATUS.FORAPPROVAL, DEAL.STATUS.APPROVED];
  this.dealType = [];
  this.isLoading = true;
  return this.dealService.getAllDeals(
    status,
    this.accountId,
    this.transaction.id,
    this.table.pageIndex   1,
    this.table.pageSize,
    this.searchInput,
    this.table.sortParams,
    this.table.sortDirs,
    this.dealType
  );
}

標籤：javascript 有角的 打字稿

上一篇：Angular結果的插值錯誤未定義

下一篇：嘗試在appSettings.json中設定環境變數-Angular和Typescript