我通过http请求,分页器和过滤器工作接收数据,但排序指令不起作用而没有任何错误。因此,我不知道自己哪里错了,请帮我解决这个问题。
这是我的代码:
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>
答案 0 :(得分:0)
尝试以下代码:
<强> 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
答案 1 :(得分:0)
如果matColumnDef如果说“令牌名称”,则mat-cell也应该说“ row.token名称”而不是row.name。 我的意思是matColumnDef和mat-cell应该相同。