在我对表执行诸如添加/编辑/删除一行（Angular 10）之类的操作后，分页不起作用

Question

我正在使用 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>
 

Answer 1

我找到了解决方案。看起来这个问题是由 Angular 引起的，其中 view child 没有在 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;
    }

http://www.github.com/angular/components/issues/10205