重置Angular的Mat數據表搜索過濾器

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

---

除此以外， 將模型綁定到元素並重置過濾器輸入值。

范本：

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