Angular 用反应矩阵进行角料台分选

我正试图用formArray作为输入数据源对角材料表进行排序/过滤

但是排序/筛选不起作用

您还需要添加事件matSortChange=sortTable$event

到桌子标签

并在组件内部添加可排序逻辑

您还需要添加事件matSortChange=sortTable$event

到桌子标签

---

并在组件内部添加可排序逻辑

这里有两个选项：

使用普通数组formdataarray.controls作为数据源，并实现所有数据源方法，如filter，sort by your。或者编写自定义CDK数据源实现。另见

使用MatTableDataSource并调整过滤和排序逻辑以支持AbstractControl对象

html

---

此外，如果要向FormArray添加新项，还应更新this.dataSource.data。另请参见此处的两个选项：

使用普通数组formdataarray.controls作为数据源，并实现所有数据源方法，如filter，sort by your。或者编写自定义CDK数据源实现。另见

使用MatTableDataSource并调整过滤和排序逻辑以支持AbstractControl对象

html

---

此外，如果要向FormArray添加新项，还应更新this.dataSource.data。另请参见

您好，我添加了此事件，但它仍然不起作用。您好，我添加了此事件，但它仍然不起作用。您可以在上显示吗

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>

<table mat-table [dataSource]="dataSource"

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