Question

假设我有一个html组件，而我的progress bar就是我的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显示正确的increame，但进度栏中的百分比值未增加。有人可以帮助我吗？

Answer 1

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

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

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

并且：

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

作为奖励，您不必再管理您的订阅。如果您在本地需要“当前”资源用于其他目的，则可以共享可观察的对象（并且必须再次管理订阅），也可以添加水龙头以设置本地值。

进度条不会更新角度

1 个答案: