Проблема с автономной нумерацией страниц по динамическому MatTable с matInput's (Angular 5 Material Design)

Question

У меня есть компонент, и есть пустая форма с некоторыми matInput, и у меня есть mat-таблица с matInput в строки, все они распределены в mat-card.

Количество строк в таблице является динамическим в зависимости от другого matInput (я назвал "диапазон" в этом примере), поэтому я поместил число в свой 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>
  

большое спасибо!!:)

Answer 1

Понял!
просто нужно изменить formGroupName (индексный массив) на позицию строки:

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