当动态赋值给matTooltip我时，会出现此错误ExpressionChangedAfterItHasBeenCheckedError。
我尝试使用进行修复，detectChanges()但出现此错误Maximum call stack size exceeded。
要求：文本被截断时，我需要显示工具提示。
HTML
<div class="container">
<p *ngFor="let each of tooltipsData" #element [matTooltip]="isTextTruncated(element) ? each : null">{{each}}</p>
</div>
打字稿
tooltipsData = [
"Lorem Ipsum",
"Lorem Ipsum is simply dummy text",
"Lorem",
"Lorem Ipsum is simply dummy text of the printing and typesetting"
];
isTextTruncated(element: any) {
// this.cdr.detectChanges();
return element.scrollWidth > element.clientWidth;
}
TL; DR -通话
detectChanges()中ngAfterViewInit()
例
import { Component, AfterViewInit, ChangeDetectorRef } from '@angular/core';
...
constructor(private cdr: ChangeDetectorRef) { }
...
ngAfterViewInit() {
this.cdr.detectChanges();
}
说明
角运行生命周期挂钩列表，从ngOnInit到ngAfterViewInit。在这个过程中的角度存储先前值和当前值（例如，在比较ngOnInit时x是false和ngAfterViewInit x是true），而当值改变lifecycle hooks正在运行则发生该错误Expression...Previous value: 'message: false'. Current value: 'message: true'.
我的情况
我正在显示基于DOM操作的工具提示（当文本被截断时），因此ngOnInit在DOM中没有加载任何元素，因此最初的值是nulland在ngAfterViewInit元素中加载并且工具提示的值从更改null为Lorem Ipsum is simply dummy text。因此，我们需要告诉angular以检测的变化 ngAfterViewInit。
其他方案 异步API
更新资料
上面的解决方案适用于示例stackblitz，但是在我的实际角度项目中它无效，因为我从Async API获得工具提示值。
所以我
detectChanges()在API完成后调用了。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句