1

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

表标签有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 上运行示例

4

1 回答 1

2

查看您的 Stackblitz，该模块MatSort不在文件中。更正的 StackBlitz 在这里。exportsmat.module.ts

因此，对于发现相同问题的其他人，代码使用单个模块来选择应用程序应该可用的所有 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 {
}
于 2019-03-17T22:41:30.337 回答