angular - 在我看来，变量不会反射(reflect)可观察到的值(value)

Question

我已经检查了很多关于如何解决这个问题的例子，但没有一个解决方案对我有用。我有一个类递归运行一个进程 20 次，我在一个可观察的过程中跟踪这个进程。我想使用这些值在 View 上创建进度条。

我知道 observable 正在工作，因为如果我直接在我的组件和 console.log 中订阅，它们将按预期以 20 个增量出现。

无论我做什么，我在 View 中都只会看到初始值和最终值。我看不到进度。

这里有什么建议吗？

// my scheduler class
private calendarPercent = new Subject()
private finishedCalendarMax = 20
private finishedCalendarCount = 0

// this stuff is called recursively until we hit our finishedCalendarMax
this.finishedCalendarCount++
this.calendarPercent.next(this.finishedCalendarCount / this.finishedCalendarMax)

// get my observable
getFinishedCalendarPercent() {
    return this.calendarPercent
}


// in app.component.ts i create my scheduler class
public scheduler = new Scheduler()


// in app.component.html
{{ scheduler.getFinishedCalendarPercent()  | async }}

Answer 1

当您递归调用 this.generateCalendar 时，只需将其包装在 setTimeout 中，如下所示:

setTimeout(() => this.generateCalendar(), 0)

将超时设置为 0，这会将下一个计算移动到执行队列的末尾，这让 UI 有机会呈现更改。

Here is a StackBlitz demo