0

我的 html 视图中有一种情况，我正在更新材质滑块的绑定，如下所示：

 <mat-slider
    [disabled]="isLoading || (isUpdating$ | async)"
    color="primary"
    min="0"
    max="100"
    step="1"
    [ngModel]="myService.thresholdvalue$ | async"
    (change)="maskChanged($event)"
  ></mat-slider>

但是当我的 CHILD COMPONENT 通过this.thresholdValueSub.next(value)调用服务来更新它时；，我得到了经典的变化检测错误：

ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '3'

我以为我会通过async在我看来使用来解决它，但我错了：

[ngModel]="myService.maskThreshold$ | async"

然后我想我会按如下方式运行更改检测（在更新值时在我的父组件上）：

ngOnInit(): void {

  this.subscriptions
    ...
    .add(this.myService.thresholdValue$.subscribe(res => {
      this.thresholdValue = res;
      if (res !== undefined) {
        this.changeDetector.markForCheck();
      }
    }));
 }

又错了 ！我仍然收到更改检测错误。

我应该发布更多代码以使其更清晰吗？

谢谢你。

*********更新*********

从 html 中删除异步管道，因为我已经在 ts 文件中进行了替换：

  <mat-slider
    [disabled]="isLoading || (isUpdating$ | async)"
    color="primary"
    min="0"
    max="100"
    step="1"
    [(ngModel)]="mosaicService.maskThreshold$"
    (change)="maskChanged($event)"
  ></mat-slider>

订阅时运行更改检测：

.add(this.mosaicService.maskThreshold$.subscribe(res => {
    this.maskValue = res;
    if (res !== undefined) {
      this.changeDetector.detectChanges();
    }
  })

不再有变更检测错误！:-)

4

1 回答 1

1

我最终删除了asyncHTML 中的管道，因为我已经订阅了 ts 文件。所以我的错误是订阅了两次。:-(

因此，有了这个变更检测器代码行，我就可以开始了！

 this.changeDetector.detectChanges();
于 2021-07-21T18:39:09.320 回答