时间戳

首页 > 解决方案 > 进度条不更新角度

javascript - 进度条不更新角度

问题描述

假设我有一个组件 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 显示正确的增量，但我的百分比值在进度条中没有增加。任何人都可以帮助我吗？

标签： javascriptangulartypescriptprogress-barangular6

解决方案

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

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

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

和：

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

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

推荐阅读