[英]Angular Material Table: Sorting not working
In my Angular app (using Angular Material) I have several tables.在我的 Angular 应用程序(使用 Angular Material)中,我有几个表。
The strange thing is that, in one case, sorting works, while, in another case, it doesn't.奇怪的是,在一种情况下,排序有效,而在另一种情况下,它不起作用。
Here is the table that works:这是有效的表格:
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> ID </th>
<td mat-cell *matCellDef="let row"> {{row.id}} </td>
</ng-container>
<ng-container matColumnDef="firstName">
<th mat-header-cell *matHeaderCellDef mat-sort-header> First Name </th>
<td mat-cell *matCellDef="let row"> {{row.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastName">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Last Name </th>
<td mat-cell *matCellDef="let row"> {{row.lastName}} </td>
</ng-container>
<ng-container matColumnDef="viewProfile">
<th mat-header-cell *matHeaderCellDef class="viewProfile"> Profile </th>
<td mat-cell *matCellDef="let row" class="viewProfile">
<button mat-icon-button (click)="openProfile(row.id)">
<mat-icon aria-label="icon-button with a page-view icon">pageview</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
... and here is the table that doesn't work: ...这是不起作用的表格:
<table class="table2" mat-table [dataSource]="dataSource2" matSort>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Project </th>
<td mat-cell *matCellDef="let row"> {{row.name}} </td>
</ng-container>
<ng-container matColumnDef="role">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Role </th>
<td mat-cell *matCellDef="let row"> {{row.role}} </td>
</ng-container>
<ng-container matColumnDef="beginning">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Beginning </th>
<td mat-cell *matCellDef="let row"> {{row.beginning | date : "mediumDate"}} </td>
</ng-container>
<ng-container matColumnDef="end">
<th mat-header-cell *matHeaderCellDef mat-sort-header> End </th>
<td mat-cell *matCellDef="let row"> {{row.end | date : "mediumDate"}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns2"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns2;"></tr>
</table>
As you can see, in both cases I use " matSort
" (in the table
tag) and " mat-sort-header
" (for the columns that are supposed to be sortable).如您所见,在这两种情况下,我都使用“
matSort
”(在table
标签中)和“ mat-sort-header
”(用于应该可排序的列)。
Furthermore, in each case I do the same import in the component.ts file:此外,在每种情况下,我都会在 component.ts 文件中执行相同的导入:
import { MatTableDataSource, MatPaginator, MatSort, MatDialog } from '@angular/material';
I just don't get why sorting works in the first case but not in the second.我只是不明白为什么排序在第一种情况下有效,但在第二种情况下无效。 Does anybody have any ideas what's going on here?
有人知道这里发生了什么吗?
Make sure that the column_name in the displayedColumns array,确保displayColumns数组中的column_name ,
displayedColumns = [' column_name '];
displayColumns = [' column_name '];
the html container, html容器,
ng-container matColumnDef=" column_name "
ng-container matColumnDef=" column_name "
and the keys of the dataSource objects,和 dataSource 对象的键,
dataSource = [ {" column_name ": "value"} ];
数据源 = [ {" column_name ": "value"} ];
ALL MATCH PERFECTLY.一切都完美匹配。
This can also be the reason that a specific set of data doesn't work and others do.这也可能是一组特定数据不起作用而其他数据集起作用的原因。
Are you sure your second table ( the one where sort is not working ) is not wrapped in a div with *ngIf ?你确定你的第二个表(排序不起作用的那个)没有用 *ngIf 包裹在一个 div 中吗? Because that is a common problem, as when the template is rendered, because of the *ngIf, matSort is undefined.
因为这是一个常见的问题,当模板被渲染时,由于 *ngIf,matSort 是未定义的。 Here is how to fix it : Angular 5 Material Data Table sorting not working
以下是修复方法: Angular 5 Material Data Table 排序不起作用
There is also another possible issue.还有另一个可能的问题。 Besides that column names have to match the attribute 'matHeaderRowDef' in 'mat-header-row *matHeaderRowDef', the column name also has to match the class field/property name of the content type used in the dataSource attribute.
除了列名称必须与“mat-header-row *matHeaderRowDef”中的属性“matHeaderRowDef”匹配外,列名称还必须与 dataSource 属性中使用的内容类型的类字段/属性名称匹配。
eg例如
<mat-table [dataSource]="mySource" matSort>
<!-- modelViewFieldNameOne has to match the class field/property name! -->
<ng-container matColumnDef="modelViewFieldNameOne">
<mat-header-cell *matHeaderCellDef
mat-sort-header>just a column</mat-header-cell>
<mat-cell *matCellDef="let tableItem">{{ tableItem.getterForMyField }}</mat-cell>
</ng-container>
// typescript where 'mySource' is kept
mySource = new MatTableDataSource<MyModelViewType>();
// typescript of MyModelViewType
export class MyModelViewType{
// this is important, it has to match the ng-container matColumnDef attribute!!!
private modelViewFieldNameOne
// this getter naming is not important for mat-table attributes
public get getterForMyField(): string {
return this.modelViewFieldNameOne;
}
}
My mat-table was sorting fine, until the model view type (ie MyModelViewType in the example above) was re-factored but only the field / property name changed, the getter() name was kept, the corresponding table column stopped sorting properly.我的 mat-table 排序很好,直到模型视图类型(即上例中的 MyModelViewType)被重构但只有字段/属性名称更改,getter() 名称被保留,相应的表列停止正确排序。 Once the attribute matched the name it worked again.
一旦属性与名称匹配,它就会再次工作。
I am using: @angluar/cdk 9.2.2我正在使用:@angluar/cdk 9.2.2
For data loaded using an API call :对于使用 API 调用加载的数据:
It's possible that the sort was set before the data was loaded onto the table;有可能在数据加载到表之前设置了排序; thereby messing up sorting feature.
从而弄乱了排序功能。
In that case, change:在这种情况下,更改:
** code to insert data into the table **
this.dataSource2.sort = this.sort;
To到
** code to insert data into the table **
setTimeout(() => this.dataSource2.sort = this.sort, 2000); // Delay it by 2 seconds.
Where this.sort
is: this.sort
在哪里:
@ViewChild(MatSort, { static: false }) sort: MatSort;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.