Angular ngOnChanges不更新视图

Question

tl；dr：ngOnChanges显示在输入属性上检测到更改，但视图未更新

我正在开发一个Angular（2+）应用程序，试图为一个异步任务创建一个进度条，该任务由一个服务使用可观察的。Observable将数字作为数据推送，以指示任务已完成的百分比。涉及三个部分：服务、ResultsComponent和ProgressBarComponent（ResultsComponent的子级）。基本数据流是：

1. 从Observable推送到ResultsComponent的数
2. ResultsComponent.PercentLoaded设置为等于此数
3. ProgressBarComponent使用percentLoaded作为输入并更新视图

问题是视图实际上没有被更新。

在ResultsComponent中,我有以下块：

this.service.doTheTask()
    .subscribe(
      data => {
        this.percentLoaded = data;
        this.ref.detectChanges();
      },
      e => console.log('error:', e),
      () =>  {
        this.isLoading = false;
        this.percentLoaded = 0;
      }
    );

添加ref.detectChanges（）成功地使ProgressBarComponent中的OnChanges钩子触发。组件和模板如下所示：

组件

export class ProgressBarComponent implements OnChanges {
  @Input() percentLoaded = 0;

  constructor() { }

  ngOnChanges(changes) {
    console.log('changes: ', changes);
  }
}

模板

<div class="meter">
  <div class="percent" [style.width.%]="percentLoaded"></div>
</div>
<p>{{percentLoaded}}% Loaded</p>

正如您所看到的，我只是记录更改以进行测试。我已经验证了ngOnChanges正在启动，并且值是正确的。我读到的所有内容都说“一旦检测到更改，视图就会自动更新”，所以我不知道还能做什么。

有什么建议吗？

Answer 1

异步任务完成后，使用以下行this.percentLoade=0；覆盖从订阅接收的数据。删除它：

() =>  {
   this.isLoading = false;
   //delete this line this.percentLoaded = 0;
}

此外，您的更改检测也不会被触发，因为只有当对象的引用被更改时，输入上的更改检测才会被触发。Number是一个简单的变量，而不是引用变量，因此在您的情况下，不会触发更改检测。我的建议是在两个组件中订阅服务，并且只从子组件触发更改检测。

export class ProgressBarComponent {
  percentLoaded: number = 0;

  constructor(private ref: ChangeDetectorRef, private service: TheService) { }

  this.service.doTheTask()
   .subscribe(
     data => {
     this.percentLoaded = data;
     this.ref.detectChanges();
   },
}