等待计数器达到角度值答案

【问题标题】：Waiting for a counter to reach a value with angular等待计数器达到角度值
【发布时间】：2021-03-10 03:38:33
【问题描述】：

我在一个类中有一个计数器，每次按下按钮时都会递增。

我希望在 ngafterViewInit() 中等待此计数器达到此值，然后再继续。我是这样测试的

export class A implements AfterViewInit {
  private counter: number=0;

  ngAfterViewInit() {
  
    new Promise((resolve) => {
      if (this.counter == 8)
        resolve();
    }).then(() => console.log("Counter has reached the value"));
  }

  private onClick(index: number) {
    this.counter++;
  }
}

我尝试在主题中添加计数器值，并在承诺中订阅主题？它有效，但对我来说似乎很费力。

【问题讨论】：

从示例中，我只需将if(this.counter >= 8) {...} 添加到onClick。
@GunnarB。我不明白你的意思......为什么我的承诺会这样解决？
在示例中我根本看不出需要承诺的意义。实际上，您只是将其用作 if，因此我将其放入 onClick。当计数器达到 8 时，ngAfterViewInit 的实际周期早已不复存在。
这是因为我想制作异步代码......你看不到它，因为我删除了所有链接的承诺以更清晰。但是使用您的解决方案，“console.log（“计数器已达到值”）“不会等待计数器。重要的是这个console.log 它在一个promise 中，因为我在这个中进行操作然后我不能在“onClick”函数中进行。我只想在计数器达到该值时才执行这些操作，独立于 onClick 事件。
好吧，你也可以把计数器变成一个可观察的结构，然后通过管道/订阅它（使用过滤器过滤值）。除此之外，我不认为，你可以做的与现在有很大不同。

标签： javascript angular typescript asynchronous promise

【解决方案1】：

对于那些想知道我到底是怎么做的人：

private pointsCalibrated: number = 0;     
private pointsCalibratedListener: Subject<Number> = new Subject<any>();

        [...]

        .then(() => {
          this.startCalibrationFlag = !this.startCalibrationFlag;
          var promise: Promise<void> = new Promise((resolve, reject) => {
            var subscription: Subscription = this.pointsCalibratedListener.subscribe((counterValue) => {
              if (counterValue == NB_POINTS) {
                subscription.unsubscribe();
                resolve();
              }
            })
          });
          return promise;
        })

[...]

private onClick(index: number): void { 
    //doSomething
      this.pointsCalibratedListener.next(++this.pointsCalibrated);
    }

【讨论】：