Angular 为什么管道异步运算符会在浏览器控制台中导致ExpressionChangedTerithasBeenCheckedError消息？

当在视图中直接使用可观察对象时，如：

<tr *ngFor="let device of devices$ | async">

如果改为使用组件成员变量，如中所示：

<tr *ngFor="let device of devices">

---

否则，视图中的数组将不会刷新。

如果设备是可观察的，则只需要异步管道。在代码中，您显式地为其分配了一个数组，因此不需要管道。

您可能没有看到它，因为它可能不太明显，但

devices*

变量是设备数组上可观察到的变量。而

devices

变量是设备数组。

<tr *ngFor="let device of devices">

ngOnInit() {
  this.observeDevices();
}
private observeDevices(): void {
  this.devicesSubscription = this.deviceStore.getDevices()
  .subscribe((devices: Array<Device>) => {
    this.devices = devices;
  });
}

devices$: Observable<Array<Device>>;
devices: Array<Device>;

private observeDevices(): void {
  this.devicesSubscription = this.deviceStore.getDevices()
  .subscribe((devices: Array<Device>) => {
    this.devices = devices;
    this.changeDetector.detectChanges();
  });
}