分别搜索列（Angular 7）

Question

我想在表的每一列上使用过滤器。 目前，我正在使用通用过滤器，但这不是正确的方法。

.htaccess

如何使用// Component export class AppComponent implements OnInit { private dataSource; requestData: ITest[]; @ViewChild(MatSort) sort: MatSort; ngOnInit() { this.getRepos(); } getRepos() { this.reportService.getAll() .subscribe(response => { this.requestData = response['tables'][0]['data']; this.dataSource = new MatTableDataSource(this.requestData); this.dataSource.sort = this.sort; }); } tableFilter(eventValue: string) { this.dataSource.filter = eventValue.trim().toLowerCase(); } ... } //HTML: <mat-form-field> <input matInput placeholder="Filter" (keyup)="tableFilter($event.target.value)"> </mat-form-field> <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z2"> <ng-container matColumnDef="ID"> <th mat-header-cell *matHeaderCellDef mat-sort-header> ID <!-- <mat-form-field> <input matInput placeholder="ID" formControlName="id"> </mat-form-field> --> </th> <td mat-cell *matCellDef="let el">{{el.ID}}</td> </ng-container> ... </table> 和formControlName分别过滤每列？我找到了模块FormBuilder

的示例

Answer 1

首先，您不应该直接接触数据源。材料提供了高水平的抽象，因此您实际上不必自己进行。

接下来，您应该使用表单控件进行管理。

filter = new FormControl('');

ngOnInit() {
  this.filter.valueChanges.subscribe(value => {
    this.dataSource = new MatTableDataSource(
      this.requestData
        .filter(report => report.yourField.includes(value) 
          || report.yourSecondField.includes(value)
        )
    );
  });
}