问题描述
我正在使用 mat-paginator 对我的表格进行分页。第一次加载页面时,分页工作正常。但是,如果我执行 CRUD 操作,则分页不起作用。所有行都显示在同一页面中。我认为这是因为我在 *ngIf 中使用分页来根据条件显示结果表。我在谷歌上进行了研究,并尝试了一些解决方案,例如使用 [hidden],在 @viewchild 分页字段中将 static 设置为 false。我不知道如何解决这个问题。
export class UsersComponent implements OnInit,OnDestroy {
public dataSource = new MatTableDataSource<IUser>();
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
constructor(
){
}
ngOnInit(): void {
this.dataSource = new MatTableDataSource<IUser>(this.users);
}
ngAfterViewInit(): void {
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
}
}
users.component.html
<div class="users-container" *ngIf="UsersResults">
<mat-card fxLayout="column" @fade class="users-card mat-elevation-z6">
<div fxFlex="10" fxlayout="row" fxLayoutAlign="center center">
<h1 class="heading">Users</h1>
<button mat-raised-button class="user-button" (click)="showcreateuserView()">Create User</button>
</div>
<div fxFlex="80">
<span fxFlex="3"></span>
<div fxFlex="100">
<table class="result-table" mat-table [dataSource]="dataSource" matSort matSortStart="desc">
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef mat-sort-header id="username">Username</th>
<td mat-cell *matCellDef="let element">
<button mat-button(click)="showEditUserView(element)" [disableRipple]="true" matToolTip="click to edit user">{{element.username}}</button>
</td>
</ng-container>
<ng-container matColumnDef="admin">
<th mat-header-cell *matHeaderCellDef id="status">Status</th>
<td mat-cell *matCellDef="let element">
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #paginator
[pageIndex]="0"
[pageSize]="7"
[pageSizeOptions]="[15,30]">
</mat-paginator>
</div>
</div>
</mat-card>
</div>
解决方法
我找到了解决方案。看起来这个问题是由 Angular 引起的,其中视图子项没有在 ngAfterViewInit 中捕获带有 *ngIf 的元素,所以这个解决方法对我有用。下面提供了类似问题的 Github 链接:
如果有更好的解决方案,请随时在这里发布。
删除代码:
this.dataSource.paginator = this.paginator;
从 ngAfterViewInit 并添加以下代码:
private paginator: MatPaginator;
@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
this.paginator = mp;
this.dataSource.paginator = this.paginator;
}