matSort не работает с несколькими таблицами mat

Question

У меня есть страница с 2 мат-таблицами, заполненными из 2 источников данных. Сортировка не работает для меня. Пожалуйста, порекомендуйте. Вот ссылка на стек

Файл 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-файл здесь, stackru сказал слишком много кода, о котором идет речь. Пожалуйста, перейдите к стеку, чтобы увидеть 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'];

который фактически не соответствует приведенному выше ключу объекта, поэтому просто измените объект JSON, который соответствует keys такой же как 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

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