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