我来帮你捋捋这个问题哈～

首先，咱们先搞清楚为什么两种操作的结果不一样：

• 用退格键删除内容时，会触发输入框的keyup事件，也就是你绑定的(keyup)="applyFilter($event)"，这个方法里应该包含了过滤数据、触发列表刷新的逻辑，所以能正常清空并刷新。
• 但点击X按钮时，你只是直接修改了输入框的DOM值（this.searchTransactionUserInput.nativeElement.value = ''），这种直接操作DOM的方式Angular是感知不到的，而且你只调用了_transactionUserPageEvent()，但这个方法可能依赖的是输入框的绑定值而非DOM的实时值，或者缺少了applyFilter里做的过滤参数更新逻辑，所以没法完成刷新。

下面给你两个可行的解决方案：

方案1：手动触发事件，对齐退格键逻辑 #

在clearSearch方法里，设置完输入框值后，手动触发input或者keyup事件，让applyFilter方法执行，和退格键的行为保持一致：

clearSearch() {
  console.log("clear")
  this.searchTransactionUserInput.nativeElement.value = '';
  // 手动触发input事件，触发applyFilter逻辑
  this.searchTransactionUserInput.nativeElement.dispatchEvent(new Event('input'));
  this._transactionUserPageEvent();
}

或者你也可以直接调用applyFilter方法，模拟一个空值的事件参数：

clearSearch() {
  console.log("clear")
  this.searchTransactionUserInput.nativeElement.value = '';
  // 直接调用applyFilter，传模拟的事件对象
  this.applyFilter({ target: { value: '' } } as KeyboardEvent);
  this._transactionUserPageEvent();
}

方案2：用双向绑定管理输入值（更推荐的Angular写法） #

直接操作DOM不是Angular的最佳实践，咱们可以用[(ngModel)]双向绑定来管理输入框的值，这样能避免DOM操作带来的问题：

第一步：修改模板代码 #

把模板引用变量改成双向绑定，同时修正按钮显示的判断条件（之前的*ngIf="searchTransactionUserInput"会一直显示按钮，因为模板引用变量始终存在）：

<mat-form-field appearance="standard" fxFill>
  <mat-label style="font-size: 12px;">Filter users by name, company or title</mat-label>
  <input matInput [(ngModel)]="searchValue" placeholder="" (keyup)="applyFilter($event)">
  <button mat-button *ngIf="searchValue" matSuffix mat-icon-button aria-label="Clear" (click)="clearSearch()">
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

第二步：修改组件类代码 #

在组件里定义绑定变量，并修改clearSearch方法：

// 组件类里新增绑定变量
searchValue: string = '';

clearSearch() {
  console.log("clear")
  // 直接清空绑定变量，Angular会自动更新输入框
  this.searchValue = '';
  // 触发过滤逻辑
  this.applyFilter({ target: { value: '' } } as KeyboardEvent);
  this._transactionUserPageEvent();
}

这样修改后，点击X按钮时，绑定变量searchValue清空，Angular自动同步输入框的显示，同时调用applyFilter执行过滤刷新，和退格键的逻辑完全一致，就能实现你想要的效果啦～

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