Question

我已经查看了很多关于如何解决此问题的示例，但是没有一个解决方案对我有用。我有一个类递归地运行一个进程20次，并且以可观察的方式跟踪该进程。我想使用这些值在视图上创建进度条。

我知道可观察对象正在工作，因为如果我直接在我的组件和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

我认为变量不会反映可观察的价值

1 个答案: