在执行更多代码之前如何等待可观察对象更新？

Question

我认为 observable 可能不适合在这里使用，但我不确定我还能使用什么来向另一个变量值提供实时更新 class。

我在服务中有这个循环class

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

并在我的组件中订阅了 observable class

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，它。

我已经为你准备了一份demo。第一个按钮触发同步迭代。第二个按钮触发异步迭代。

伪造一个异步 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);
  }
}

在执行更多代码之前如何等待可观察对象更新？

How do I wait for an observable to update before executing more code?

javascript

angular

typescript

angular2-observables