Сортировка мат-таблицы по значению столбца

Question

У меня есть коврик с информацией о клиенте. Я хотел бы отсортировать строки по значению столбца. Нет ошибки, но сортировка не работает.

Тег таблицы имеет matSort:

<mat-table [dataSource]="dataSource" matSort>

В каждом определении столбца есть mat-sort-header:

<ng-container matColumnDef="name">
  <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
  <mat-cell *matCellDef="let customer"> {{customer.name}} </mat-cell>
</ng-container>

В классе компонентов у меня есть

...
@ViewChild(MatSort) sort: MatSort;
...
ngOnInit() {
    this.dataSource = new MatTableDataSource(this.data as any);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
}

Так что все в значительной степени похоже на документацию , в которой говорится

Если вы используете MatTableDataSource для источника данных вашей таблицы, предоставить директиву MatSort источнику данных, и он будет автоматически прослушивать сортировку изменений и менять порядок данных отображается таблицей.

но ни таблица, ни функциональность для сортировки не применяются к таблице.

Этот вопрос не имеет отношения к делу, поскольку проблема присутствует даже при жестком кодировании моих данных в классе.

Я не вижу, чего мне не хватает. Корень проблемы уклоняется от меня. Вы можете увидеть мой полный код и запустить пример на Stackblitz

Answer 1

Глядя на ваш Stackblitz, модуль MatSort не был частью вашего exports в файле mat.module.ts.Исправлено StackBlitz здесь.

Так что для других, обнаруживающих ту же проблему, код использует один модуль, чтобы выбрать все модули материалов, которые должны быть доступны для приложения.В этом случае любые другие модули в приложении должны ссылаться только на этот отдельный модуль, а не на сами модули каждого материала.он хочет показать другим, когда импортируется.В данном случае это все, что он импортировал из материала.

Итак, исправление было:

@NgModule({
    imports: [
        CommonModule,
        // ... other modules
        MatSortModule,
        // ... other modules
    ],
    exports: [
       // ... other modules
        MatSortModule, // <---------- This export was missing
        // ... other modules
    ]
})
export class MatModule {
}