ExpressionChangedAfterItHasBeenCheckedError при динамическом присвоении значения matTooltip

Question

При динамическом присвоении значения 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;
}

Пример Stackblitz

Answer 1

TL; DR - вызов detectChanges() in ngAfterViewInit()

Пример

import { Component, AfterViewInit, ChangeDetectorRef } from '@angular/core';
...
constructor(private cdr: ChangeDetectorRef) { }
...
ngAfterViewInit() {
 this.cdr.detectChanges();
}

Пояснение

Angular выполняет список перехватов жизненного цикла , начиная с ngOnInit до ngAfterViewInit. В этом процессе angular сохраняет предыдущие значения и сравнивает их с текущим значением (например, In ngOnInit, когда x равно false, и ngAfterViewInit x равно true), когда значение изменяется при lifecycle hooks выполняются, то возникает эта ошибка Expression...Previous value: 'message: false'. Current value: 'message: true'.

Мой сценарий

Я отображаю всплывающую подсказку, основанную на манипуляциях с DOM (когда текст усекается) Таким образом, в ngOnInit элементы не загружаются в DOM, поэтому изначально значение равно null, а в ngAfterViewInit элементы загружаются и значение всплывающей подсказки изменяется с null на Lorem Ipsum is simply dummy text. Итак, нам нужно указать angular, чтобы обнаружить изменения в ngAfterViewInit.

Другой сценарий Asyn c API

Обновление

Приведенное выше решение работает в примере stackblitz , но в моем реальном angular проекте это не работает, потому что я получаю значение всплывающей подсказки от Asyn c API .

Поэтому я вызвал detectChanges() после завершения API.