标签: mat-pagination

我试图在点击分页时调用API。最初，我静态设置了长度，效果很好。我能够进行分页 API 调用。然后我也尝试动态设置长度，它也起作用了，但后来它停止了工作。请帮我指出我的错误。我正在 this.totalEmp 中设置内容的长度，并且也能够在 html 端打印它，但是当我尝试在 mat-paginator 中设置 [length] 时。它对我不起作用。我也尝试在 mat-paginator 中设置 #paginator，但没有看到任何变化。

Below is my implementation



**HTML:**
<mat-paginator 
    [length]="totalEmp"
    [hidden]="normalPagination"
    [pageSize]="2" 
    [pageSizeOptions]="[2]"
    [pageIndex]="pageIndex"
    (page)="pageEvent = getDataByPagination($event)"></mat-paginator>

**.ts file Code**

export class EmpComponent implements OnInit {
 
         dataSource: any;
         totalEmp: number=0;
         normalPagination: boolean;
        
        @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
         @ViewChild(MatSort, { static: true }) sort: MatSort;
        
        ngOnInit() {
            this.getTableContentCount();
          }
        
        
         getTableContentCount() {
            this.myService.CountService().subscribe(
              (response: any) => {
                if (response) {
           
                  this.totalEmp = response;
                  this.getServerData(0,this.totalEmp);
                }
              },
              (error: any) => …

我正在使用带有 formArray 的 mat-table，我还需要 Mat-paginator。

但不幸的是分页不起作用。

Stackbltiz 演示

样本来源，

.html

<form [formGroup]="form">
  <table mat-table [dataSource]="dataSource" formArrayName="dates">
    <!-- Row definitions -->
    <tr mat-header-row *matHeaderRowDef="displayColumns"></tr>
    <tr mat-row *matRowDef="let row; let i = index; columns: displayColumns;"></tr>

    <!-- Column definitions -->
    <ng-container matColumnDef="from">
      <th mat-header-cell *matHeaderCellDef> From </th>
      <td mat-cell *matCellDef="let row; let index = index"  [formGroupName]="index"> 
        <input type="date" formControlName="from" placeholder="From date">
      </td>
    </ng-container>

    <ng-container matColumnDef="to">
      <th mat-header-cell *matHeaderCellDef> To </th>
      <td mat-cell *matCellDef="let row; let index = index"  [formGroupName]="index">
        <input type="date" formControlName="to" placeholder="To …

我的mat-paginator子组件如下所示：

子组件.html

<mat-paginator #paginator></mat-paginator>

我想使用@ViewChild()如下所示从父组件获取此分页器：

父组件.html

<child 
    <!-- code omitted for simplicity -->
>
</child>

@ViewChild('paginator') paginator: MatPaginator;

resetPaginator() {          
    this.paginator.firstPage();
}

但由于this.paginator未定义，我无法访问子组件中的分页器。我不确定如何从父级访问分页器。一种方法可能是使用以下方法，但如果有一种优雅的方法，我会更喜欢它。任何想法？

@ViewChild(ChildComponent) child: ChildComponent;

我有一些带有 mat-paginator 的 mat-table，如下所示：

                 <table mat-table style="width: 100%;" [dataSource]="dataSource">\n                    <ng-container matColumnDef="evento">\n                        <th mat-header-cell *matHeaderCellDef> Evento </th>\n                        <td mat-cell *matCellDef="let row"> {{row.evento}} </td>\n                    </ng-container>\n                    <ng-container matColumnDef="fecha">\n                        <th mat-header-cell *matHeaderCellDef> Fecha </th>\n                        <td mat-cell *matCellDef="let row">{{row.fecha}} </td>\n                    </ng-container>\n                    ..... more columns .....\n                    <ng-container matColumnDef="edit">\n                        <th mat-header-cell *matHeaderCellDef style="text-align: right; margin-right: 8px;"> Edit </th>\n                        <td mat-cell *matCellDef="let row" style="text-align: right;">\n                            <button mat-icon-button (click)="editEvent(row)">\n                                <mat-icon>edit</mat-icon>\n                            </button>\n                        </td>\n                    </ng-container>\n\n                    <tr mat-header-row *matHeaderRowDef="displColumns"></tr>\n                    <tr mat-row *matRowDef="let row; columns: displColumns"></tr>\n                </table>\n                <mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20]" …