0

我想在 Angular 中实现聊天。聊天的每个项目（消息）都有一个标题（标题/名称），应该有一个特定的边距。边距应根据 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 高度计算右边距。

我会很感激你有任何想法。谢谢！

4

2 回答 2

0

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

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

于 2021-11-03T08:35:22.197 回答
-1

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

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

于 2021-11-02T21:48:49.383 回答