Mat分页器无法与材料表上的FormArray一起使用

Question

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

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

Stackbltiz Demo

样本源，

。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 date">
      </td>
    </ng-container>
  </table>
  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
  <button type="button" (click)="addRow()">Add row</button>
</form>

<pre>{{ form.value | json }}</pre>

。Ts

@ViewChild(MatPaginator) paginator: MatPaginator;
      dataSource = new MatTableDataSource<any>();
      displayColumns = ['from', 'to'];
      form: FormGroup = this.fb.group({ 'dates': this.fb.array([]) });

      constructor(private fb: FormBuilder) { }

      ngOnInit() {
        this.dataSource.paginator = this.paginator;
      }

      get dateFormArray():FormArray {
        return this.form.get('dates') as FormArray;
      }

      addRow() {
        const row = this.fb.group({
          'from'   : null,
          'to'     : null
        });
        this.dateFormArray.push(row);
        this.dataSource.data =  this.dateFormArray.controls;
      }

Answer 1

您需要在length上提供mat-paginator属性。

DEMO USING YOUR CODE

类似这样：

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [length]="dataSource.data.length"></mat-paginator>