由于过滤器导致表达式更改，*ngIf 的渲染延迟 - Angular

Question

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true'.

我在控制台中收到上述“警告”。我有一堆过滤器可以隐藏/显示 ngFor 循环中的项目。当过滤器没有匹配时，例如没有 ngFor 孩子们 我提示 ngIf 显示一条优雅的消息。

这就是我的做法......

Component.ts

<!-- Returned contact logs -->
<ul #personTimeline>
  <my-timeline-entry
    *ngFor="let entry of contactLog | filter:filteredContactReason:'contactReason'"
    logEntryDateTime={{entry.dateTime}} logEntryNotes={{entry.notes}}>
  </my-timeline-entry>
</ul>


<!-- No results returned -->
<div *ngIf="!personTimeline.children.length">
    <div class="alert alert-warning" role="alert">
      <strong>{{startDate}} Sorry!{{' '}}</strong>No contact log matches found.
    </div>
</div>

通过使用#personTimeline，我检查了它的children.length。当为“0”时，它显示我的无结果 div。

我已经更改了一些内容，并重构了一些代码，现在该消息仅在我“在”第一次看到应该看到无结果 div 的空白区域之后进行交互时出现。一旦我单击一个元素，就会出现无结果消息。

我知道我可能需要介绍ngOnChanges？因为这是一个生命周期问题，但不确定如何定位我的 #personTimeline 句柄，还是我需要通过该句柄以某种方式触发 *ngIf="!personTimeline.children.length"？

或者有没有更好的方法来实现不显示结果？

一如既往地感谢任何帮助或建议。

Answer 1

这个链接有一个漂亮的解释：https://stackoverflow.com/a/47061845/9045615

基本上，这是因为在开发模式下，Angular 的变更检测会在每次常规变更检测之后添加额外的检查，以检查两种变更检测机制之间是否有任何值、模型或任何属性发生了变化。

但是，我有一个使用 ChangeDetectionRef 的快速修复/破解方法：

import { Component, ChangeDetectorRef } from '@angular/core';

export class Component implements AfterViewInit {
  constructor(public changeDetectorRef: ChangeDetectorRef) { }
  // Try ngAfterContentInit  if ngAFterViewInit() doesn't work for you.
  ngAfterViewInit() {
    this.changeDetectorRef.detectChanges();
  }
}

其他文章阅读：https://angular.io/api/core/ChangeDetectorRef。