重置 Angular 的垫数据 Table 搜索过滤器

Question

我的网络应用程序使用 Material 数据故事 (https://code-maze.com/angular-material-table/) 来显示一些现有数据。它还具有各种过滤器，包括 Mat Data Table 的内置搜索过滤器。我的问题是我可以在按下 'clear all filters' 按钮时重置所有其他自行实现的过滤器，但我找不到清除搜索过滤器并重置其过滤数据的方法。

  // This is my data source that is used in the template
  dataSource = new MatTableDataSource<MyObj>();

  // ... more code here ...

  clearFilters(){
        //clear other filters here

        //I want clear dataSource's search filter... but how?
  }

我还没有在其他任何地方看到过这个帖子，做 dataSource.filter = "" 或 dataSource.filter = null 之类的事情然后更新观察者不会清除文本字段或产生任何结果。

Answer 1

将过滤器属性设置为空字符串。

clearFilters(){
   this.dataSource.filter = '';
}

除了 bind a model 元素之外，还重置过滤器输入值。

模板：

<mat-form-field class="this-is-a-class" floatLabel="never">
  <mat-icon matPrefix>search</mat-icon>
  <input matInput type="text" [(ngModel)]="filter" #ctrl="ngModel" (keyup)="applySearchFilter($event.target.value)" placeholder="Search by ID or Address..." autocomplete="off"> </mat-form-field>

TS :

filter:string;

clearFilters(){
   this.dataSource.filter = '';
   this.filter = '';
}

重置 Angular 的垫数据 Table 搜索过滤器

Reset Angular's Mat Data Table search filter

angular

typescript

angular-material-table