我一直在尝试使用mat-paginator实现服务器端分页并且遇到了很多困难。我查看了各种博客和教程,但没有一个对我实现目标有太大帮助。
服务-
getAllCategoryByPage(data?: any): Observable<any> {
var Url = `/Categories/GetAll`;
return this.http
.post<any>(Url, data)
.pipe(catchError(this.handleError<any>('getAllCategoryByPage', [])));
}
组件 .ts-
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort; //sorting is not mandatory in my case
ngOnInit(): void {
this.loadCategoryList;
this.dataSource.paginator = this.paginator;
}
ngAfterViewInit() {
this.loadCategoryList();
this.dataSource.paginator = this.paginator;
}
loadCategoryList = (): void => {
this.paginator.page.subscribe((resp) => {console.log(resp);});
merge(this.paginator.page)
.pipe(
startWith({}),
switchMap(() => {
this.asyncService.start();
console.log(this.paginator.pageIndex ,this.paginator.pageSize);
return this.categoryService.getAllCategoryByPage(
{
"page": this.paginator.pageIndex + 1,
"pageSize": this.paginator.pageSize,
"searchString": ""
}
)
})
)
.subscribe(
data => {
console.log(data.apiData);
this.length = data.totalRecord;
this.dataSource.paginator = data.apiData;
this.asyncService.finish();
}
);
};
html-
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="sl">
<th mat-header-cell *matHeaderCellDef> SL. </th>
<td mat-cell *matCellDef="let element; let i = index;"> {{i+1}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef >CATEGORY NAME </th>
<td mat-cell *matCellDef="let element"> {{element.categoryName}} </td>
</ng-container>
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef >STATUS </th>
<td mat-cell *matCellDef="let element">
{{element.recStatus}}
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>ACTIONS</th>
<td mat-cell *matCellDef="let row" >
<button class="table-button-action" style="color: red;" (click)="deleteRow(row)" >
<mat-icon>clear</mat-icon>
</button>
<button class="table-button-action" style="color:royalblue;" (click)="onEdit(row)">
<mat-icon>create</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [length]= "length" [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>
我没有得到表中的数据。在这里,我在加载页面以及浏览页面(使用下一个和上一个按钮)时遇到错误,我不知道发生了什么错误以及如何解决它
谁能指导我修复它以使其完美运行?
提前致谢 :)