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

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

我知道observable正在工作，因为如果我直接在我的组件和控制台中订阅，请按照预期以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 }}

---

当您递归调用

this.generateCalendar

时，只需将其包装在

setTimeout

中，如下所示：

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

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

---

如果您直接订阅，而不是使用

console.log

，则会发生什么情况，请更新一个变量，然后在HTML中使用该变量，而不是依赖异步管道？如果您的主题在模板呈现时已完成发送值，然后，

async

管道将永远听不到任何事件。你最好使用

行为主题

来代替，你能做一个堆栈闪电战来显示问题吗？@kshetline同样的事情。只有在点击“生成”按钮时才能看到第一个和最后一个值。在完成日历生成后，您将看到下面弹出的数字。在控制台中查看正在从app.component.ts中的observable打印的“我想要的号码”。我需要那个十进制值在我的视图中实时更新。谢谢你的帮助！在这件事上浪费了太多时间