1

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

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 文件放在这里，stackoverflow 说了太多有问题的代码。请转到 stackblitz 查看 html。

4

2 回答 2

3

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

例如：

DataSource第二张桌子

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

第二个表的列名是：

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

于 2019-01-12T05:40:56.283 回答
0

这是它应该如何同时适用于第一张桌子和第二张桌子。但是您仍然需要进行一些小的更改以使排序表单独为每个表分开工作。

我已经在 Stackblitz 上对您的代码进行了测试，并且可以正常工作。

我注释掉了您必须更改/删除的内容。并且不要忘记ViewChild从@angular/core

我不确定你是否也需要它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;
    }
 }
于 2019-01-11T17:35:30.090 回答