Angular Material Table 使用反应式数组排序
Angular Material Table Sorting with reactive formarray
我正在尝试使用 formArray 作为输入数据源对 angular material table 实施排序/过滤。
dataSource = new MatTableDataSource([]);
<table mat-table [dataSource]="formdataarray.controls" multiTemplateDataRows class="mat elevation-z8" matSort >
<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay" >
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{column}}</th>
<td mat-cell *matCellDef="let element"> {{ element.value[column] }} </td>
</ng-container>
但是排序/过滤不起作用
您还需要添加活动 (matSortChange)=sortTable($event)
到 table
标签
并在组件内部添加sortTable
逻辑
这里有两个选择:
使用普通数组 formdataarray.controls
作为 dataSource
并实现所有 DataSource 方法,如过滤器,自行排序。或者编写自定义 CDK 数据源实现。另见 https://blog.angular-university.io/angular-material-data-table/
使用 MatTableDataSource
并调整筛选和排序逻辑以支持 AbstractControl
对象。
html
<table mat-table [dataSource]="dataSource"
ts
ngOnInit() {
// fill FormArray
...
this.dataSource.data = this.formdataarray.controls;
this.dataSource.sortingDataAccessor = (data: AbstractControl, sortHeaderId: string) => {
const value: any = data.value[sortHeaderId];
return typeof value === 'string' ? value.toLowerCase() : value;
};
const filterPredicate = this.dataSource.filterPredicate;
this.dataSource.filterPredicate = (data: AbstractControl, filter) => {
return filterPredicate.call(this.dataSource, data.value, filter);
}
}
此外,如果您想向 FormArray
添加新项目,您也应该更新 this.dataSource.data
。另见
Requires ngAfterViewInit to work
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
...
@ViewChild(MatSort, {static: false}) sort: MatSort
...
ngOnInit() {
this.getYourData$.subscribe(d => this.data = new MatTableDataSource(d));
}
ngAfterViewInit(): void {
this.data.sortingDataAccessor = (data: AbstractControl, sortHeaderId: string) => {
const value: any = data.value[sortHeaderId];
return typeof value === 'string' ? value.toLowerCase() : value;
};
this.data.sort = this.sort; // where this.sort defined above.
this.data.filterPredicate = (data: AbstractControl, filter) => {
// return true or false on data.
}
}
... html
<table matSort ...
我正在尝试使用 formArray 作为输入数据源对 angular material table 实施排序/过滤。
dataSource = new MatTableDataSource([]);
<table mat-table [dataSource]="formdataarray.controls" multiTemplateDataRows class="mat elevation-z8" matSort >
<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay" >
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{column}}</th>
<td mat-cell *matCellDef="let element"> {{ element.value[column] }} </td>
</ng-container>
但是排序/过滤不起作用
您还需要添加活动 (matSortChange)=sortTable($event)
到 table
标签
并在组件内部添加sortTable
逻辑
这里有两个选择:
使用普通数组
formdataarray.controls
作为dataSource
并实现所有 DataSource 方法,如过滤器,自行排序。或者编写自定义 CDK 数据源实现。另见 https://blog.angular-university.io/angular-material-data-table/使用
MatTableDataSource
并调整筛选和排序逻辑以支持AbstractControl
对象。
html
<table mat-table [dataSource]="dataSource"
ts
ngOnInit() {
// fill FormArray
...
this.dataSource.data = this.formdataarray.controls;
this.dataSource.sortingDataAccessor = (data: AbstractControl, sortHeaderId: string) => {
const value: any = data.value[sortHeaderId];
return typeof value === 'string' ? value.toLowerCase() : value;
};
const filterPredicate = this.dataSource.filterPredicate;
this.dataSource.filterPredicate = (data: AbstractControl, filter) => {
return filterPredicate.call(this.dataSource, data.value, filter);
}
}
此外,如果您想向 FormArray
添加新项目,您也应该更新 this.dataSource.data
。另见
Requires ngAfterViewInit to work
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
...
@ViewChild(MatSort, {static: false}) sort: MatSort
...
ngOnInit() {
this.getYourData$.subscribe(d => this.data = new MatTableDataSource(d));
}
ngAfterViewInit(): void {
this.data.sortingDataAccessor = (data: AbstractControl, sortHeaderId: string) => {
const value: any = data.value[sortHeaderId];
return typeof value === 'string' ? value.toLowerCase() : value;
};
this.data.sort = this.sort; // where this.sort defined above.
this.data.filterPredicate = (data: AbstractControl, filter) => {
// return true or false on data.
}
}
... html
<table matSort ...