函数中有条件的条件类导致“ExpressionChangedAfterItHasBeenCheckedError”

Question

我在组件的列表中显示了一个项目数组。项目的属性之一是描述字段，其范围可以从一个单词到几个句子。

当描述太长，我想截断它，并显示一个按钮，将显示点击时的完整文本。是否截断和显示按钮的条件基于返回布尔值的函数:

checkOverflow(element) {
  if (element.offsetHeight < element.scrollHeight ||
    element.offsetWidth < element.scrollWidth) {
    return true;
  } else {
    return false;
  }
}

然后我从组件的模板端使用这个函数，如下所示（ngFor的一小部分）：

 <p #refDescription
    class="item-description--max-height"
    [class.fade--read-more]="checkOverflow(refDescription)">
        {{item.description}}
 </p>
 <button class="button button--read-more" *ngIf="checkOverflow(refDescription">Read more</button>

这里使用的CSS很简单：

.item-description--max-height {
  font-size: 20px;
  @include font-fira-sans-italic;
  line-height: 28px;
  margin-bottom: 0;  
  max-height: 2.9em;
  overflow: hidden;
}

.fade--read-more {
  height: 2.9em; /* exactly two lines */
}

目前，该行为非常偶然，我在控制台中收到错误：

expressionchangedafterithasbeencheckedererror:检查后表达式已更改。以前的值:“ngIf: false”。当前值:“ngIf: true”。

我相信我将类绑定到函数是错误的轨道 - 非常感谢任何建议。我正在使用 Angular 版本 7。

谢谢。

Answer 1

通常，此错误是由模板内部调用的方法引起的。

尝试将checkOverflow（）调用移动到组件中：

// use view children to get references to dom elements
@ViewChildren('refDescription') descRef: QueryList<ElementRef>;

ngAfterViewInit(): void {
  // wait when dom rendered
  setTimeout(() => {
    // get dom elements
    const elements = this.descRef.toArray().map(i => i.nativeElement);
    // check overflow and put result into 'overflow' property
    elements.forEach((el, index) => {
      this.items[index]['overflow'] = this.isOverflow(el); 
    });
  });
}

相应地更新模板：

<p #refDescription
    class="item-description--max-height"
    [class.fade--read-more]="item.overflow">
        {{item.description}}
 </p>
 <button class="button button--read-more" *ngIf="item.overflow">Read more</button>