1

テーブルの各列でフィルターを使用したいと考えています。現在、一般的なフィルターを使用していますが、それは正しいアプローチではありません。

// 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各列を別々にフィルタリングするために、フォームコントロール名を使用するにはどうすればよいですか? モジュールの例を見つけましたFormControl

4

1 に答える 1