matSort 不适用于多个垫表

Question

我有一个页面，其中包含从 2 个数据源填充的 2 个垫表。排序对我不起作用。请指教。 Here is the stackblitz link

TS 文件

export class TableSortingExample implements OnInit {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  displayedColumns2: string[] = ['position2', 'name2', 'weight2'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);
  dataSource2 = new MatTableDataSource(ELEMENT_DATA2);

   @ViewChildren(MatSort)
  sort = new QueryList<MatSort>();

  ngOnInit() {
    this.dataSource.sort = this.sort.toArray()[0];
    this.dataSource2.sort = this.sort.toArray()[1];
  }
}

我无法将 html 文件放在这里，Whosebug 说有问题的代码太多了。请转到 stackblitz 查看 html。

Answer 1

这是第一个 table 和第二个应该如何工作。但是你仍然需要做一些小的改变来使排序 tables 单独为每个 table 工作。

我已经在 Stackblitz 上用您的代码对其进行了测试，它有效。

我注释掉了你必须 change/remove 的内容。并且不要忘记从 @angular/core

导入 ViewChild

我不确定 ngAfterViewInit 中您是否也需要它。希望它能帮助你，让你走上正确的方向。

export class TableSortingExample implements OnInit {
    displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
    displayedColumns2: string[] = ['position2', 'name2', 'weight2'];
    dataSource = new MatTableDataSource(ELEMENT_DATA);
    dataSource2 = new MatTableDataSource(ELEMENT_DATA2);

    // @ViewChildren(MatSort)
    // sort = new QueryList<MatSort>();
    @ViewChild(MatSort) sort: MatSort;
    numberOfMatSort = 0;
    ngOnInit() {
      // this.dataSource.sort = this.sort.toArray()[0];
      // this.dataSource2.sort = this.sort.toArray()[1];
      this.dataSource.sort = this.sort;
    }
    ngAfterViewInit() {
       console.log(this.sort);
       // this.sort.forEach(m => console.log(m));

      // setTimeout(() => this.numberOfMatSort = this.sort.length, 0);
      this.dataSource.sort = this.sort;
    }
 }

Answer 2

我认为问题与您用于迭代的对象的列名和键有关：

例如：

DataSource 第二个 table

const ELEMENT_DATA2: any[] = [
  { position: 11, name: 'Hydrogen', weight: 1.0079 },
  { position: 12, name: 'Helium', weight: 4.0026 },
  { position: 13, name: 'Lithium', weight: 6.941 },
  { position: 14, name: 'Beryllium', weight: 9.0122 }
];

第二个 table 的列名称是：

displayedColumns2: string[] = ['position2', 'name2', 'weight2'];

实际上与上面的对象键不匹配，所以只需更改与 keys 匹配的 JSON 对象与 displayedColumns2 相同，这样排序函数就会知道它所在的列名必须排序。

喜欢：

const ELEMENT_DATA2: any[] = [
  { position2: 11, name2: 'Hydrogen', weight2: 1.0079 },
  { position2: 12, name2: 'Helium', weight2: 4.0026 },
  { position2: 13, name2: 'Lithium', weight2: 6.941 },
  { position2: 14, name2: 'Beryllium', weight2: 9.0122 }
];

StackBlitz

matSort 不适用于多个垫表

matSort not working with multiple mat-tables

angular-material

angular

mat-table