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

Question

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

我在控制台中收到上述“警告”。我有一堆过滤器可以隐藏/显示 ngFor 循环中的项目。当过滤器没有匹配时，例如没有 ngFor child 我提示 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"那个 handle ？

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

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

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。