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

Question

我的网络应用程序使用 Material Data Tale (https://code-maze.com/angular-material-table/) 来显示一些现有数据。它还具有各种过滤器，包括 Mat Data 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 = '';
}

---

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