[英]Angular material matSort does not work
我通过http请求,分页器和过滤器工作接收数据,但是sorting指令没有任何错误就无法工作。 因此,我不知道我在哪里错了,请帮帮我。
这是我的代码:
component.ts:
displayedColumns = ['token name', 'industry'];
dataSource = new MatTableDataSource();
id: any;
resultsLength = 0;
pageSize = 5;
tokens: Tokens[];
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(private apiService: ApiService) { }
ngOnInit() {
this.loadTokens();
}
loadTokens() {
this.apiService.getTokens()
.subscribe((data: any) => {
this.tokens = data;
this.dataSource.data = this.tokens;
console.log(this.dataSource);
this.resultsLength = this.tokens.length;
}, error => {
console.log(error);
});
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
this.dataSource.filter = filterValue;
}
component.html:
<mat-table [dataSource]="dataSource" matSort>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;">
</mat-row>
<ng-container matColumnDef="token name">
<mat-header-cell *matHeaderCellDef mat-sort-header> TOKEN NAME </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="industry">
<mat-header-cell *matHeaderCellDef mat-sort-header> INDUSTRY </mat-header-cell>
<mat-cell *matCellDef="let row" [style.color]=""> {{row.description}} </mat-cell>
</ng-container>
</mat-table>
<mat-paginator #paginator [pageSize]="pageSize" [length]="resultsLength"></mat-paginator>
请尝试以下代码:
的HTML
<div class="example-container mat-elevation-z8">
<mat-table [dataSource]="dataSource" matSort>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header> TOKEN NAME </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="description">
<mat-header-cell *matHeaderCellDef mat-sort-header> INDUSTRY </mat-header-cell>
<mat-cell *matCellDef="let row" [style.color]=""> {{row.description}} </mat-cell>
</ng-container>
</mat-table>
<mat-paginator #paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
</div>
TS
displayedColumns = ['name', 'description'];
dataSource: MatTableDataSource<any>= new MatTableDataSource(this.loadTokens());
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor() { }
ngOnInit() {
this.loadTokens();
}
loadTokens() {
//you can use your loadTkens() function here and fetch Json data.
return [
{
"name": "sss",
"description": "It"
},
{
"name": "aa",
"description": "Hositality"
},
{
"name": "bbb",
"description": "Construction"
},
{
"name": "ccc",
"description": "sample data1"
},
{
"name": "ddd",
"description": "sample data2"
},
{
"name": "eee",
"description": "sample data3"
},
];}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
this.dataSource.filter = filterValue;
}
工作示例: https : //stackblitz.com/edit/mat-sort?file=app/app.component.ts
如果matColumnDef如果说“令牌名称”,那么mat-cell也应该说“ row.token名称”而不是row.name。 我的意思是matColumnDef和mat-cell应该相同。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.