Блог

В моем веб-приложении используется база данных материала (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 затем обновление наблюдателей, не очищает текстовое поле и не дает никаких результатов.

Задайте свойству filter значение пустой строки.

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