使用matInput进行动态MatTable的离线分页问题（Angular 5 Material Design）

我有一个组件，并且有一个带有一些matInput的空表单，我有一个mat-table，matInput也在行中，所有这些都分布在mat-card中 .

表的行数是动态的，基于另一个matInput（我在示例中称为'range'），因此，我将数字放在我的matInput上，称为'range'，并使用离线分页器动态创建行 .

这是我的问题，如果我需要创建20行，并决定在每个页面上放置5个项目的分页器大小，我填入matInput的表格，当我点击下一页时，matInput的colums保持上一页的值 . 它没有发生在标签列上，比如行的数量，只有matInput的colums . 我真的不知道为什么会发生这种情况......请帮助一下？

这是我的示例代码

（https://stackblitz.com/edit/angular-qhp2eg?file=app%2Ftable-http-example.ts）

• .ts文件：

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator, MatTableDataSource, MatSort} from '@angular/material';
import {FormArray, FormBuilder, FormGroup} from '@angular/forms';
import {merge, Observable, of as observableOf} from 'rxjs';
import {catchError, map, startWith, switchMap} from 'rxjs/operators';

/**
 * @title offline table pagination example
 */
@Component({
  selector: 'example-offline-table',
  styleUrls: ['example-offline-table.css'],
  templateUrl: 'example-offline-table.html',
})
export class ExampleOfflineTable implements OnInit {


  displayedColumns: string[] = ['position', 'name', 'surname'];
  dataSource = new MatTableDataSource();

  public myFormObject: FormGroup;
  public myUsersTableArray: FormArray;

  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor(private fb: FormBuilder) {

    this.myFormObject = this.getBuildForm();

    this.dataSource = new MatTableDataSource();
    this.dataSource.paginator = this.paginator;
  }

  ngOnInit() {
  }

  getBuildForm(): any {

    return this.fb.group({
      range: [''],
      users: this.fb.array([])
    });
  }


  createRowsByRange() {
    const theRange = this.myFormObject.get('range');

    this.myUsersTableArray = this.myFormObject.get('users') as FormArray;

    for (let index = 0; index < theRange.value; index++) {

      const position = index + 1;

      this.myUsersTableArray.push(
        this.fb.group({
          position: position,
          name: [''],
          surname: ['']
        })
      );
    }
    this.dataSource = new MatTableDataSource(this.myUsersTableArray.value);
    this.dataSource.paginator = this.paginator;
  }
}

• .html文件：

<div class="example-container mat-elevation-z8">
  <form [formGroup]="myFormObject">

    <mat-form-field>
      <input matInput type="text" formControlName="range" (change)="createRowsByRange()" placeholder="Range">
    </mat-form-field>

    <div formArrayName="users">
      <div class="example-table-container">

        <mat-table #table [dataSource]="dataSource">

          <!-- Position Column -->
          <ng-container matColumnDef="position">
            <mat-header-cell *matHeaderCellDef>Pos.</mat-header-cell>
            <mat-cell *matCellDef="let row">
              {{row['position']}}
            </mat-cell>
          </ng-container>


          <!-- Name Column -->
          <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
            <mat-cell *matCellDef="let row;  let rIndex = index; ">
              <mat-form-field [formGroupName]="rIndex">
                <input matInput type="text" formControlName="name" placeholder="Name">
              </mat-form-field>
            </mat-cell>
          </ng-container>


          <!-- Surname Column -->
          <ng-container matColumnDef="surname">
            <mat-header-cell *matHeaderCellDef>Surname</mat-header-cell>
            <mat-cell *matCellDef="let row;  let rIndex = index; ">
              <mat-form-field [formGroupName]="rIndex">
                <input matInput type="text" formControlName="surname" placeholder="Surname">
              </mat-form-field>
            </mat-cell>
          </ng-container>



          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
        </mat-table>

        <mat-paginator [pageSizeOptions]="[5, 10, 15]"></mat-paginator>

      </div>
    </div>
  </form>
</div>

非常感谢！！ :)