时间戳

首页 > 解决方案 > 使用反应式formarray进行角度材料表排序

angular - 使用反应式formarray进行角度材料表排序

问题描述

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

StackBlits 代码链接

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>

但是排序/过滤不起作用

标签： angularangular-materialmaterial-designmaterial-tableangular-material-table

解决方案

您在这里有两个选择：

  • 使用普通数组formdataarray.controls作为 adataSource并实现所有 DataSource 方法，如过滤器，按您自己的排序。或者编写自定义 CDK DataSource 实现。另请参阅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);
  }
}

分叉的 Stackblitz

此外，如果您想添加新项目，您FormArray也应该更新this.dataSource.data。另请参阅使用 FormArray 的 Angular Material 可编辑表

推荐阅读