进度条不更新角度答案

【问题标题】：progress bar doesn't update angular进度条不更新角度
【发布时间】：2018-11-21 15:06:06
【问题描述】：

假设我有一个组件 html，其中有我的 html 我的progress bar

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

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

    this.percentageSubscription=this.percentageService.percentage$.subscribe((percentage)=>{

          this.current=this.current+percentage;
console.log(this.current);

        });

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

【问题讨论】：

round-progress组件如何使用当前值？它有什么用？尝试将{{current}} 添加到您的模板中，看看该值是否更新。如果是这样，那么循环进度组件很可能只读取当前值一次。
@Arne 我放了 {{current}} 并且每次百分比增加时该值都不会更新，但它显示为 0 值和 100 值，但不显示 20% 或 35% .我不知道我需要做什么才能更新这一轮进度

标签： javascript angular typescript progress-bar angular6

【解决方案1】：

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

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

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

还有：

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

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

【讨论】：

您的解决方案无效！ :( 值没有更新。现在我正在尝试将 markForCheck 和 detectionChanges 放在订阅值之后，但它们的工作方式不同！
如果在扫描（管道的第二个参数）下添加tap(value => console.log('my new value: ', value)，您看到值更新了吗？如果您在模板中添加{{current$ | async}}，该值不会更新？
是的，console.log 中的值是更新，但 html 中的更新方式不正确！
我真的很好奇你在那个组件中做了什么，其余的代码是什么样子的。当您完全禁用角度变化检测时，异步管道甚至可以工作。