我有这张表用于多个数据。
我的问题是数据显示正确,但分页器和排序不起作用。
排序只显示箭头,但不会排序
Paginator 不会计算项目并将显示“0 of 0”
这是我的代码:component.html
<mat-table class="lmat-elevation-z8" [dataSource]="dataSources[pagePart]" matSort>
<ng-container *ngFor="let column of columns[pagePart]" [matColumnDef]="column.columnDef">
<mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.header }}</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row[column.columnDef] }}</mat-cell>
</ng-container>
<ng-container matColumnDef="azioni">
<mat-header-cell *matHeaderCellDef>Azioni</mat-header-cell>
<mat-cell *matCellDef="let row">
<button>... here there's a list of action buttons for each row ...</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns[pagePart].concat('azioni'); sticky:true"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns[pagePart].concat('azioni')"></mat-row>
</mat-table>
我加载数据的代码是:component.ts
displayedColumns={};
columns={};
dataSources={};
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
loadPart(part){
this.http.get("myapi").subscribe(data=>{
// load data
var datas=[];
for(var k=0; k<data["length"]; ++k){
datas.push(data[k]);
}
// setup columns
this.columns[part]=[];
this.displayedColumns[part]=[];
if(data["length"]>0) // setup column names, headers and everything
for(var key in data[0]){
if(key.indexOf("id")>=0) continue;
this.displayedColumns[part].push(key);
this.columns[part].push({
columnDef: key,
header: this.renameHeader(key) // rename header based on the name provided by the api
});
}
// setup table
this.dataSources[part]=new MatTableDataSource(datas);
// load all the possible shit
this.dataSources[part].sort = this.sort;
this.dataSources[part].paginator = this.paginator;
// apply changes
this.data_loaded[part]=true;
this.cdr.detectChanges();
});
}
关于如何使分页器和排序工作的任何想法?