Сброс поискового фильтра таблицы данных Matular Angular

Question

Мое веб-приложение использует историю данных материала (https://code -maze.com / angular-material-table / ) для отображения некоторых существующих данных.Он также имеет различные фильтры, в том числе встроенный поисковый фильтр таблицы данных Mat.Моя проблема в том, что я могу сбросить все мои другие реализованные фильтры при нажатии кнопки «очистить все фильтры», но не могу найти способ очистить фильтр поиска и сбросить его отфильтрованные данные.

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