按列值对 mat-table 进行排序

Question

我有一张垫子-table，里面有客户信息。我想按列值对行进行排序。没有错误，但排序不起作用。

table 标签有 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>

在组件class中我有

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

所以一切都与 the documentation 中的内容非常相似

If you are using the MatTableDataSource for your table's data source, provide the MatSort directive to the data source and it will automatically listen for sorting changes and change the order of data rendered by the table.

但是样式和排序功能都没有应用到 table。

不相关，因为即使我的数据硬编码在 class.

中，问题仍然存在

我不明白我错过了什么。问题的根源是在逃避我。你可以看到我的完整代码和运行 example on Stackblitz

Answer 1

查看您的 Stackblitz，MatSort 模块不是 mat.module.ts 文件中 exports 的一部分。已更正 StackBlitz is here.

因此，对于发现相同问题的其他人，代码使用单个模块 select 所有 Material 应用程序应可用的模块。然后应用程序中的任何其他模块只需要引用这个单个模块，而不是每个 Material 模块本身。

但是，要使其正常工作，这个单一模块 (mat.module.ts) 需要 export 在导入时要向其他人公开的任何内容。在这种情况下，它是从 Material.

导入的任何内容

所以修复是：

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

按列值对 mat-table 进行排序

Sorting mat-table by column value

columnsorting

angular

mat-table