使用反应式数组进行角度材料表排序

问题描述 投票:0回答:4

我正在尝试以 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>

但是排序/过滤不起作用

angular angular-material material-design material-table angular-material-table
4个回答
5
投票

您有两个选择:

  • 使用普通数组

    formdataarray.controls
    作为
    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 可编辑表


0
投票

您还需要添加事件

(matSortChange)=sortTable($event)

前往

table
标签

并在组件内添加

sortTable
逻辑


0
投票

需要 ngAfterViewInit 才能工作

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 ...

0
投票

为了寻找这个问题的答案,我也经历了一段漫长的旅程。就我而言,还涉及过滤和分页。我在这篇文章here中总结了我的经验。

© www.soinside.com 2019 - 2024. All rights reserved.