angular - MatPaginator 角度材料:我怎么知道我是否在表格的最后一页?
问题描述
我必须做下一步:假设我有一个包含 20 条记录的表,我在 5 条中显示它们,在下一页中显示另外 5 条记录等等。所以我想知道当我在最后一页时的方法,在我的 API 中调用另外 20 条记录并将它们显示在表中。
我已经尝试过了,但我没有成功。我正在使用有角度的材料
这是我的代码 html
<div class="col-12 col-md-6 text-right float-right">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Buscador" upperCase>
</mat-form-field>
</div>
<table mat-table [dataSource]="usuarios" class="mat-elevation-z8" matSort>
<ng-container matColumnDef="Cedula">
<th mat-header-cell *matHeaderCellDef mat-sort-header="Cedula"> Cedula </th>
<td mat-cell *matCellDef="let user">{{ user?.Cedula }}</td>
</ng-container>
<ng-container matColumnDef="Nombres">
<th mat-header-cell *matHeaderCellDef mat-sort-header="Nombres"> Nombres </th>
<td mat-cell *matCellDef="let user">{{ user?.Nombres }}</td>
</ng-container>
<ng-container matColumnDef="Apellidos">
<th mat-header-cell *matHeaderCellDef mat-sort-header="Apellidos"> Apellidos </th>
<td mat-cell *matCellDef="let user">{{ user?.Apellidos }} </td>
</ng-container>
<ng-container matColumnDef="Email">
<th mat-header-cell *matHeaderCellDef mat-sort-header="Email"> Email </th>
<td mat-cell *matCellDef="let user">{{ user?.Email }} </td>
</ng-container>
<ng-container matColumnDef="Contacto">
<th mat-header-cell *matHeaderCellDef mat-sort-header="Contacto"> Contacto </th>
<td mat-cell *matCellDef="let user">{{ user?.Contacto }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="pageSize" (page)="pageEvent = handlePage($event)" showFirstLastButtons></mat-paginator>
TS
@Component({
selector: 'app-asignar-reclamacion',
templateUrl: './asignar-reclamacion.component.html',
styleUrls: ['./asignar-reclamacion.component.scss']
})
export class AsignarReclamacionComponent implements OnInit {
//atributos
displayedColumns: string[] = ['Cedula', 'Nombres', 'Apellidos', 'Email', 'Contacto'];
usuarios = new MatTableDataSource([]);
pageSize: number[] = [3];
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
@ViewChild(MatSort, { static: false }) sort: MatSort;
//listUsuarios:User[]= []
pageEvent: PageEvent;
constructor(private activatedRoute: ActivatedRoute,private userService : UserService) { }
ngOnInit(): void {
this.activatedRoute.data.subscribe((data) => {
console.log(data)
this.usuarios = new MatTableDataSource(data.usuarios.page);
})
}
// pageEvent(event){
// console.log(event)
// }
ngAfterViewInit(): void {
this.usuarios.sort = this.sort;
this.usuarios.paginator = this.paginator;
console.log(this.paginator)
}
handlePage(event){
let size = event.length
let lastPage = event.pageIndex;
if(lastPage + 1 == size){
console.log("ultima pagina")
}
console.log(event)
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim();
filterValue = filterValue.toLowerCase();
this.usuarios.filter = filterValue;
if(this.usuarios.filteredData.length == 0){
this.searchDB(filterValue)
}
console.log(this.usuarios.filteredData)
}
searchDB(text:string) {
this.userService.getUserDataFilter(text).subscribe((data)=>{
console.log(data)
})
}
}
解决方案
要检查您是否在表格的最后一页,您必须检查表格是否有下一页。
通过使用(page)
存在于的事件<mat-paginator></mat-paginator>
,您可以检查表是否有下一页。
例子:
在您的 html 中:
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" (page)="onPaginateChange($event)"></mat-paginator>
在你的 ts 中:
onPaginateChange(event) {
console.log(this.dataSource.paginator.hasNextPage());
console.log(event);
}
如果表没有下一页,上述hasNextPage()
函数将返回,在这种情况下您可以加载更多数据。false
推荐阅读
- typescript - TypeOrm、Postgres 和 NestJS:过滤 ManyToMany 列
- terminal - 使用 GREP 在文件服务器中搜索具有电子邮件地址的所有文件
- css - CSS Clip Path 将圆圈对齐到左侧
- github - 安装时选择 Github App Callback URL
- android - Apollo GraphQL 自动生成无法导入类
- mysql - 从搜索房间是否已预订的 SQL 查询中排除值
- javascript - JS:将 2 个命名空间对象减少为 1 个
- .net - Dotfuscator 一遍又一遍地重复 SetStateMachine 和 MoveNext 警告
- netlogo - 扩展异常。Python 无法启动
- gstreamer - 通过 Gstreamer 将 VNC 转换为 RTSP