如何解决在我对表执行添加/编辑/删除行Angular 10等操作后,分页不起作用
我正在使用 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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。