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文件放在此处，stackoverflow表示有太多问题代码。请转到stackblitz查看html。

Answer 1

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

例如：

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相同的displayedColumns2匹配的JSON Object，以便sort函数将知道必须对其进行排序的列名。

赞：

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

Answer 2

这是它应如何同时作用于第一个表和第二个表的方式。但是，您仍然需要进行一些小的更改，以使排序表可以单独针对每个表工作。

我已经在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;
    }
 }

matSort无法与多个mat表一起使用

2 个答案: