Angular清空筛选框后filter显示undefined报变更检测错误如何解决

问题根因 #

该报错是Angular开发模式下的变更检测校验触发：点击clear图标时，同一个变更检测周期内先后执行了onSearch调用、searchVal.value赋值、query赋值操作，直接修改了模板中*ngIf绑定的判断条件，导致Angular完成当前周期视图状态校验后，绑定的条件又发生了变化，触发了状态不一致的报错。
另外原有逻辑还存在两个隐藏问题：

• 点击clear图标时onSearch接收的event.target是mat-icon元素，取到的value为undefined，逻辑不符合预期
• 同时操作DOM属性searchVal.value和组件属性query，两者状态没有统一管控，容易出现同步问题

可行解决方案 #

推荐优先使用第三种方案，符合Angular最佳实践。

方案1：手动触发变更检测 #

通过注入ChangeDetectorRef在状态修改后主动通知Angular运行变更检测：

1. 注入依赖

constructor(
  private cdr: ChangeDetectorRef,
  // 保留原有其他注入项
  private location: Location,
  private router: Router,
  // ...
) {}

2. 新增独立清空方法

clearSearch() {
  this.query = '';
  this.searchData1$.next('');
  this.cdr.detectChanges();
}

3. 修改模板clear按钮绑定

<mat-icon *ngIf="searchVal.value" class="clear-icon" (click)="clearSearch();searchVal.value = '';">
    clear
</mat-icon>

方案2：异步执行清空逻辑 #

将状态修改放到下一个宏任务队列，避开当前变更检测周期：

clearSearch() {
  setTimeout(() => {
    this.query = '';
    this.searchData1$.next('');
  }, 0)
}

模板绑定和方案1一致即可。

方案3：统一用组件属性管控状态（最推荐） #

移除直接操作DOM属性的逻辑，所有状态通过组件属性query双向绑定，Angular可以正常追踪状态变更：

1. 修改模板input绑定，改用双向绑定[(ngModel)]，同时把*ngIf的判断条件统一改为query：

<input #searchVal class="form-control m-input"
    [placeholder]="tabIndex < 1 ? 'Search Customer, Building, Shift, Department, Lead' : 'Search Employee Name, Customer,Building, Shift, Department'"
    type="text" [(ngModel)]="query" (keyup)="onSearch($event)">
<span class="m-input-icon__icon m-input-icon__icon--right">
    <span *ngIf="!query"><i class="la flaticon-search-1"></i></span>
    <mat-icon *ngIf="query" class="clear-icon" (click)="clearSearch()">
        clear
    </mat-icon>
</span>

2. 清空方法逻辑简化为：

clearSearch() {
  this.query = '';
  this.searchData1$.next('');
}

该方案完全遵循Angular数据驱动视图的设计原则，不需要额外处理变更检测，也避免了DOM操作和组件状态不同步的问题。

内容的提问来源于stack exchange，提问作者rishabh tripathi