Странное поведение Angular mat-sort-header 5.2.4

Question

Я использую мат-стол в сочетании с мат-сортировочным заголовком из углового материала.Но странно то, что сортировка отлично работает на 2 из 6 столбцов (0 и 4).При сортировке остальных, одна запись всегда вытягивается наверх, а остальные остаются несортированными или случайным образом «упорядоченными».Я надеюсь, что смогу предоставить достаточно кода, чтобы решить его.Импортируются все, и это в основном вставляется с копией из https://v5.material.angular.io/components/table/examples.

Таблица

каждый второй столбец похож на столбец во фрагменте

 <mat-table #matTable [dataSource]="dataSource" matSort>
  <ng-container matColumnDef="Status">
   <mat-header-cell *matHeaderCellDef mat-sort-header
....

TypeScript

@ViewChild(MatSort) sort: MatSort;

ngAfterViewInit() {
   this.dataSource.sort = this.sort;
}
ngOnInit() {
   this.dataSource = new MatTableDataSource(this.projectlist); 
}
//no specific code for sorting needed (I think)

Прошу прощения за скриншот, являющийся немецким, но вы должны понять, что я имею в виду.

Sorted

Есть идеи, как это исправить?

Answer 1

Для работы matSortHeader необходимо убедиться, что ваш matColumnDef соответствует имени свойства вашего объекта источника данных.Например:

<ng-container matColumnDef="status">
      <mat-header-cell *matHeaderCellDef
                       mat-sort-header>
       My header text
      </mat-header-cell>
      <mat-cell *matCellDef="let row">
        {{row.status}}
      </mat-cell>
    </ng-container>

matColumnDef является состоянием, поэтому ваша строка также должна иметь свойство с точно таким же именем:

export class MyDataSet {
 status: string;
}

В противном случае оператор сортировки не сможет выполнить свою работу.Вы также можете написать свой собственный dataAccessor:

  this.datasource.sortingDataAccessor = ((item: MyDataSet, sortHeaderId: string) => {
      // write code to get your property out of item using sortHeaderId
    });

Дополнительная информация здесь: https://material.angular.io/components/table/api#MatTableDataSource