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

Question

我的 Web 应用程序使用 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 = '';
}

---

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

模板 ：

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