顧客情報が記載されたマットテーブルがあります。列の値で行を並べ替えたいのですが。エラーはありませんが、並べ替えは機能していません。
テーブルタグには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で例を実行することができます
Stackblitzを見ると、MatSortモジュールはファイルexports内の一部ではありませんでしたmat.module.ts。修正されたStackBlitzはこちらです。
したがって、同じ問題を見つけた他の人のために、コードは単一のモジュールを使用して、アプリで使用できるはずのすべてのマテリアルモジュールを選択しています。アプリ内の他のモジュールは、各マテリアルモジュール自体ではなく、この単一のモジュールを参照するだけで済みます。
ただし、これを機能させるには、この単一のモジュール（mat.module.ts）exportは、インポート時に他の人に公開したいものすべてに公開する必要があります。この場合、それはマテリアルからインポートしたものです。
したがって、修正は次のとおりです。
@NgModule({
imports: [
CommonModule,
// ... other modules
MatSortModule,
// ... other modules
],
exports: [
// ... other modules
MatSortModule, // <---------- This export was missing
// ... other modules
]
})
export class MatModule {
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加