angular - matInput を使用した動的 MatTable でのオフライン ページネーションの問題 (Angular 5 Material Design)

Question

私はコンポーネントを持っていて、いくつかのmatInputを含む空のフォームがあり、行にもmatInputを含むmat-tableがあり、それらはすべてmat-cardに分散されています。

テーブルの行数は、別の matInput (この例では「range」と呼びます) に基づいて動的であるため、「range」と呼ばれる matInput に数値を入力すると、行はオフライン ページネーターで動的に作成されます。

そして、これが私の問題です。20行を作成する必要があり、ページネーターのサイズにページごとに5つのアイテムを置くことにした場合、そこにあるmatInputをテーブルに入力し、次のページをクリックすると、matInputの列が保持されます前のページの値。行番号のようなラベル列では発生せず、matInput の列だけです。そして、なぜこれが起こっているのか本当にわかりません..助けてください。

これが私のサンプルコードです

( 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>
  

どうもありがとう！！:)