angular - 分别在列中搜索（Angular 7）

Question

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

// 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>

如何使用FormBuilder和 formControlName 分别过滤每一列？我找到了一个模块的例子FormControl

Answer 1

首先，您不应该直接接触数据源。Material 提供了高级别的抽象，因此您实际上不必自己动手。

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

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)
        )
    );
  });
}