Angular Material Table添加Filter功能时value相关报错如何解决？

两个报错均为TypeScript类型校验触发的提示，具体原因如下：

• Object is possibly 'null'：TypeScript 严格空值校验模式下，默认认为$event.target有可能为null，直接访问属性会触发空值风险提示
• Property 'value' does not exist on type 'EventTarget'：$event.target的默认类型是通用的EventTarget接口，该接口没有定义value属性，无法直接读取输入框的值

以下三种方案均可解决问题，可根据开发场景选择：

方案1：模板层快速兼容（最简单） #

直接在模板中用$any()方法绕过TS类型校验，无需修改TS代码，适合快速开发场景：

<mat-form-field>
    <input (keyup)="applyFilter($any($event.target).value)" matInput placeholder="Filter">
</mat-form-field>

方案2：传递完整事件到TS层做类型处理（最规范） #

保留TS类型校验能力，推荐生产环境使用，先修改模板代码：

<mat-form-field>
    <input (keyup)="applyFilter($event)" matInput placeholder="Filter">
</mat-form-field>

再调整TS中的方法逻辑，对事件目标做类型断言后再取值：

applyFilter(event: Event) {
  const filterValue = (event.target as HTMLInputElement).value;
  this.dataSource.filter = filterValue.trim().toLowerCase();
}

方案3：使用模板引用变量（可读性最高） #

给input元素绑定模板引用变量，直接传递变量的value值，无需修改TS原有代码，逻辑更直观：

<mat-form-field>
    <input #filterInput (keyup)="applyFilter(filterInput.value)" matInput placeholder="Filter">
</mat-form-field>

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