matSort не работает с несколькими таблицами mat - PullRequest
Новая
       7

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

0 голосов
/ 10 января 2019

У меня есть страница с 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-файл здесь, stackoverflow сказал, что слишком много кода под вопросом. Пожалуйста, перейдите к стеку, чтобы увидеть HTML.

Ответы [ 2 ]

0 голосов
/ 12 января 2019

Я думаю, что проблема связана с именами столбцов и ключами объекта, который вы используете для итерации:

Например:

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

0 голосов
/ 11 января 2019

Вот как это должно работать для первой таблицы и второй сразу. Но вам все равно нужно внести небольшие изменения, чтобы таблицы сортировки работали отдельно для каждой таблицы.

Я протестировал его на вашем коде в 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;
    }
 }
...