在我看来，变量不会反映可观察到的价值

Question

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

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

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

这里有什么建议吗？

// 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

在我看来，变量不会反映可观察到的价值

Variable in my view wont reflect value from observable

asynchronous

observable

typescript

angularjs-directive

angular