重置 Angular 的 Mat 数据表搜索过滤器

Question

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

  // 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 = '';
}

除此之外，将模型绑定到元素并重置过滤器输入值。

模板 ：

<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 = '';
}