我正在使用 mat-paginator 对表格进行分页。第一次加载页面时分页工作正常。但是,如果我执行 CRUD 操作,则分页不起作用。所有行都显示在同一页面中。我认为这是因为我在 *ngIf 中使用分页来按条件显示结果表。我研究了谷歌并尝试了一些解决方案,比如使用 [hidden],在@viewchild 分页字段中将静态设置为 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>