[英]Angular- Material table sorting not working in proper way
我正在創建一個應按文件名和日期排序的表,為此我遵循了 Angular Material 文檔,但它不起作用,它沒有在編譯器或瀏覽器控制台中顯示任何錯誤,該表如下所示:
<mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="File">
<mat-header-cell *matHeaderCellDef mat-sort-header> File </mat-header-cell>
<mat-cell *matCellDef="let element" data-label="File"> {{element.fileName}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="Date">
<mat-header-cell *matHeaderCellDef mat-sort-header>Date </mat-header-cell>
<mat-cell *matCellDef="let element" data-label="Date"> {{element.date}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="Extension">
<mat-header-cell *matHeaderCellDef mat-sort-header>Extension</mat-header-cell>
<mat-cell *matCellDef="let element" data-label="Extension"> {{element.extension}} </mat-cell>
</ng-container>
<ng-container matColumnDef="View">
<mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
<mat-cell *matCellDef="let element" data-label="View"> <a href="{{element.url}}" target="_blank" class="green-text"><i class="material-icons">visibility</i></a></mat-cell>
</ng-container>
<ng-container matColumnDef="Delete">
<mat-header-cell *matHeaderCellDef> Delete </mat-header-cell>
<mat-cell *matCellDef="let element" data-label="Delete"> <a class="red-text"><i class="material-icons">delete_forever</i></a></mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
這是我的 ts 代碼
export class FilesComponent implements OnInit {
displayedColumns: string[] = ['File', 'Extension', 'Date', 'View', 'Delete'];
dataSource = new MatTableDataSource<Files>(ELEMENT_DATA);
data = ELEMENT_DATA;
selects: any;
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
@ViewChild(MatSort, {static: true}) sort: MatSort;
constructor(private addFile: MatDialog) {
}
ngOnInit(): void {
this.Materialize();
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
Materialize() {
this.selects = document.querySelectorAll('select');
M.FormSelect.init(this.selects);
}
changeFiles(value) {
console.log('option:', value);
switch (parseInt(value)) {
case 1:
this.dataSource = new MatTableDataSource<Files>(ELEMENT_DATA);
break;
case 2:
this.dataSource = new MatTableDataSource<Files>(Charts);
break;
case 3:
this.dataSource = new MatTableDataSource<Files>(Documents);
break;
default:
this.dataSource = new MatTableDataSource<Files>(ELEMENT_DATA);
break;
}
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
}
}
事件它應用的排序標題和樣式(排序的箭頭)出現在數據未排序的表中。
matColumnDef 名稱和 *matCellDef 實際值名稱應相同
在 component.html
改變
<ng-container matColumnDef="File"> <mat-header-cell *matHeaderCellDef mat-sort-header> File </mat-header-cell> <mat-cell *matCellDef="let element" data-label="File"> {{element.fileName}} </mat-cell></ng-container>
到
<ng-container matColumnDef="fileName"> <mat-header-cell *matHeaderCellDef mat-sort-header> File </mat-header-cell> <mat-cell *matCellDef="let element" data-label="File"> {{element.fileName}} </mat-cell> </ng-container>
在 ts:
改變
displayedColumns: string[] = ['File', 'Extension', 'Date', 'View', 'Delete'];
到
displayedColumns: string[] = ['fileName', 'Extension', 'Date', 'View', 'Delete'];
您需要添加MatSortModule
在進口陣列app.module.ts
@user12129132 的答案適用於正常排序(您需要更改數據源中的字段值以匹配列定義中的字段值,並在 matColumn 定義中使用相同的值)但您的文件名中包含數字,它不會被排序正確。為此我們可以使用sortingDataAccessor。
在此處查看工作版本 - Stackblitz: https ://stackblitz.com/edit/angular-g4svyj
ngAfterViewInit() {
this.dataSource.sort = this.sort;
this.dataSource.sortingDataAccessor = (data, attribute) => {
let formattedData=data[attribute]
if(attribute=="fileName")
{
formattedData=parseInt(formattedData.match(/(\d)*$/)[0]);
}
return formattedData;
};
this.dataSource.paginator = this.paginator;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.