如何解决Angular中的"Expression Changed After It Has Been Checked Error"？

Question

我想在 Angular 中实现聊天。聊天的每个项目（消息）都有一个 header (title/name)，它应该有一个特定的边距。边距应根据 div 的高度计算。代码如下所示。

<div *ngFor="let item of chatArray">
  <div #juliet [style.margin-top.px]= "-(juliet.clientHeight/2)">
  {{item.message}}
  </div>
</div>

问题出在 Chrome 浏览器中（在 Mozilla 中没有问题）。控制台错误是：“ExpressionChangedAfterItHasBeenCheckedError：检查后表达式已更改。以前的值：'margin-top: -40.5'。当前值：'margin-top: -40'。”

在 ts 文件中我尝试实现变化检测：

ngOnInit() {
//code for chat initialization
this.cdRef.detectChanges();
}

ngAfterViewInit() {
   this.cdRef.detectChanges();
}

ngAfterContentChecked() {
  this.cdRef.detectChanges();
}

如果我在 .ts 文件中添加

@Component({
  ...
  changeDetection: ChangeDetectionStrategy.OnPush
})

错误消失但边距小于应有的值。我想消除错误并根据 div 高度计算右边距。

如果您有任何想法，我将不胜感激。谢谢！

Answer 1

ngOnInit() .detectChanges 调用没有用，因为正在进行更改检测，并且将在评估 ngOnInit 挂钩后立即检查模板。

ngAfterViewInit 和 ngAfterContentChecked .detectChanges 调用是错误的，因为这些挂钩是在使用正确的数据更新模板后调用的。

Answer 2

尝试一下，可能会解决这个问题。创建指令

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appApplyMargin]'
})
export class ApplyMargin {
    constructor(el: ElementRef) {
       el.nativeElement.style.marginTop = 
              (el.nativeElement.clientHeight/2) + 'px'
    }
}

注意：如果需要将构造函数中的代码包装在 setTimeout

如何解决Angular中的"Expression Changed After It Has Been Checked Error"？

How to solve the "Expression Changed After It Has Been Checked Error" in Angular?

angular

google-chrome

data-binding

directive

change-detector-ref