进度条不更新角度

Question

假设我有一个组件 html，其中有我的 html 我的进度条

 <round-progress #progress
    [current]="current"
</round-progress>

电流是百分比值。 在我的 ts 组件中，我这样做：

this.percentageSubscription = this.percentageService.percentage$.subscribe((percentage) => {
     this.current = this.current + percentage;
     console.log(this.current);
});

我打印的值是正确的。 它是按照另一种算法增加的。 console.log 显示正确的增量，但我的百分比值在进度条中没有增加。

谁能帮我？

Answer 1

由于您的值确实在您的订阅中正确更新，但在您的模板中没有正确更新，因此更改检测无法注册新值。 您可以手动触发更改检测，但您不应该这样做。

我建议使用async管道。 从而将您的用法重写为：

<round-progress #progress
    [current]="current$ | async"
</round-progress>

和：

this.current$ = this.percentageService.percentage$.pipe(
  scan((acc = 0, percentage) => acc + percentage)    
);

作为奖励，您不必再管理您的订阅。 如果您在本地需要“当前”用于其他目的，您可以共享 observable（并且必须再次管理订阅），或者您可以添加一个设置本地值的水龙头。