我的.html文件:
<mat-table [dataSource]="dataSource" padding matSort>
<ng-container matColumnDef="uid">
<!--<mat-header-cell *matHeaderCellDef mat-sort-header>Building UID</mat-header-cell>-->
<mat-header-cell *matHeaderCellDef mat-sort-header>
Building UID
</mat-header-cell>
<mat-cell *matCellDef="let tree" padding>{{tree.uid}}</mat-cell>
</ng-container>
<ng-container matColumnDef="address">
<mat-header-cell *matHeaderCellDef mat-sort-header>
Address
</mat-header-cell>
<mat-cell *matCellDef="let tree" padding>{{tree.location.address}}</mat-cell>
</ng-container>
<ng-container matColumnDef="zipCode">
<mat-header-cell *matHeaderCellDef mat-sort-header>
Zip code
</mat-header-cell>
<mat-cell *matCellDef="let tree" padding>{{tree.location.zipCode}}</mat-cell>
</ng-container>
...
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
我的.ts文件:
@Component({
selector: 'page-buildings',
templateUrl: 'buildings.html',
})
export class BuildingsPage {
@ViewChild(MatSort) sort: MatSort;
...
private displayedColumns: string[] = ["uid", "address", "zipCode", "city", "country", "treeDetails"]; // tslint:disable-line
private dataSource: MatTableDataSource<any>;
...
constructor(...) {
this.dataSource = new MatTableDataSource(...);
this.dataSource.sort = this.sort;
}
...
}
但是在我的mat-table中,排序只适用于第一列"uid",而不适用于其他列。
我从这个答案(第一个答案)中了解到,在*matColumnDef="firstString"和{{tree.secondString}},中,firstString必须等于secondString才能工作,但在我的例子中,它是link,我使用了两点。
你知道为什么会发生这种情况,以及如何让它工作吗?
请看下图:
当我单击"Building UID“列时,mat-table将被排序,一切工作正常。但当我单击其他列(地址、邮政编码、城市、国家)时,它只对前两行进行排序,只有升序排序有效(降序排序无效),其余行根本不排序。
https://stackoverflow.com/questions/50579494
复制相似问题