当每行由 FormGroup 表示时自定义排序 mat-table

Question

我有一个mat-table，其中datasource 是MatTableDataSource<FormGroup>。代表每一行的FormGroup 显然是另一个FormGroup 的FormArray 属性。所以，表单的架构大致是这样的：

FormGroup(persons: FormArray(FormGroup[firstName, lastName]))

我能够通过以下方式覆盖过滤功能：

this.dataSource.filterPredicate = someCustomFilterFunction

但是，如果我尝试使用以下命令覆盖排序： this.dataSource.data.sort((a: FromGroup, b: FormGroup): number...)

我的表格很混乱。事实上，看起来其中一个表单控件认为它是另一行中的另一个表单控件。

如果我不必在已经排序的状态下重新创建整个排序，就没有办法对其进行排序吗？

Answer 1

当你说“代表每一行的 FormGroup 显然是另一个 FormGroup 的 FormArray 属性”时，我真的不太确定。如果你有一个 MatDataSource，你有 NOT 一个 FormGroup 的 FormArray，只是一个 FormGroups 的数组

在这种情况下，您唯一需要的是提供自定义排序功能。请记住，您是在比较 FormGroups：

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
    this.dataSource.sortData = (data: FormGroup[], sort: MatSort) => {
      //in "data" you has the array of FormGroup
      //in sort.direction you has "asc,"desc" or ""
      //in sort.active you has the column you clicked
      const factor =
        sort.direction == "asc" ? 1 : sort.direction == "desc" ? -1 : 0;
      if (factor) {
        data = data.sort((a: FormGroup, b: FormGroup) => {
          const aValue = a.get(sort.active) ? a.get(sort.active).value : null;
          const bValue = a.get(sort.active) ? b.get(sort.active).value : null;
          return aValue > bValue ? factor : aValue < bValue ? -factor : 0;
        });
      }
      return data;
    };
  }

注意：我假设一个 dataSource 一个 FormGroup 的数组创建为

dataSource = new MatTableDataSource<any>(
    ELEMENT_DATA.map(
      x =>
        new FormGroup({
          position: new FormControl(x.position),
          name: new FormControl(x.name),
          weight: new FormControl(x.weight),
          symbol: new FormControl(x.symbol)
        })
    )
  );

见stackblitz

更新如果你想要一个formArray，请记住dataSource是关于yourFormArray.controls的，有些像

  myArray=new FormArray(...)
  //see that dataSource is MatDataSource(this.myArray.controls)
  dataSource = new MatTableDataSource<any>(this.myArray.controls);