如何在執行更多代碼之前等待 observable 更新？

Question

我認為 observable 可能不適合在這里使用，但我不確定我還能用什么來向另一個類提供變量值的實時更新。

我在服務類中有這個循環

elements.forEach(element => {
  doStuff();
  this.numberSubject.next(valueFromDoStuff);
})

以及訂閱我的組件類中的 observable

numberSubjectObservable.subscribe(result => {
  this.value = result
}

我想要的是能夠暫停循環，直到我的 Angular 組件更新為訂閱中的最新值，但現在它在渲染最終值之前一直等到結束。

Answer 1

不確定我是否完全理解您在這里嘗試做什么，但是如果您需要等待 this.value 等於 numberSubjectObservable 結果，您可以使用異步方法並嘗試以下操作

你可以改變這個

numberSubjectObservable.subscribe(result => {
  this.value = result
}

對此

this.value = await numberSubjectObservable.toPromise();

Answer 2

不確定您的 doStuff() 是同步還是異步。 如果它是同步的，您不會在進度條中看到任何更新，因為更改是即時發生的，因此您只能看到最終值。

如果它是異步的，首先你必須忘記 forEach，它[不使用它] 。

我為你准備了一個演示。 第一個按鈕觸發同步迭代。 第二個按鈕觸發異步迭代。

偽造一個異步 doStuff：

private async asyncDoStuff(element: number): Promise<number>{
  console.log('running async doStuff with element: ' + element);
  return new Promise(resolve => {
   setTimeout(resolve, 1000);
  }).then(()=>{return this.doStuff(element);});
}

並循環遍歷您的數組以查看延遲 1 秒的更新：

public async asyncIterate(){
  let newElement = 0;
  for (const element of this.elements){
  newElement = await this.asyncDoStuff(element);
  console.log('newElement: ' + newElement);
  this.numberAsyncSubject.next(newElement);
  }
}