角材料过滤表 [英] Angular Material Filter Table

问题描述

我试图在 Angular 中为我的材料表添加一个过滤器选项，但我收到了这两个错误，它们在值"上指定:

I am trying to add a Filter option for my Material Table in Angular, but I am getting these two errors, which specify on 'value':

Object is possibly 'null'.
Property 'value' does not exist on type 'EventTarget'.

这是我的 .html 文件:

Here is my .html file:

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

和 .ts 文件:

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

我做错了什么/我应该做些什么不同的?

What am I doing wrong/ What should I be doing different?

推荐答案

解决方案 1:

添加 id (#filter) 以使用 filter.value

Solution 1:

Add id (#filter) to input and retrieve value with filter.value

<input matInput #filter (keyup)="applyFilter(filter.value)" placeholder="Filter">

---

解决方案 2:

添加另一个函数来处理事件并将值解析到applyFilter.

.component.ts

.component.ts

fireFilterEvent(event: Event) {
  const input = (event.target as HTMLInputElement).value;
  this.applyFilter(input);
}

对于您的 input 元素，您在 (keyup) 事件上调用 fireFilterEvent($event).

For your input element, you call fireFilterEvent($event) on (keyup) event.

.component.html

.component.html

<input matInput (keyup)="fireFilterEvent($event)" placeholder="Filter">

这篇关于角材料过滤表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！