Question

我的Web应用程序使用材料数据故事（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 = '';
}

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

1 个答案: