使用 matInput 的动态 MatTable 的离线分页问题（Angular 5 Material 设计）

Question

我有一个组件，有一个带有一些 matInput 的空表格，我有一个 mat-table，也有 matInput 的行，它们都分布在 mat-card 中。

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

这是我的问题，如果我需要创建 20 行，并决定在分页器大小上每页放置 5 个项目，我将那里的 matInput 填入 table，当我点击下一页，带有 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>

使用 matInput 的动态 MatTable 的离线分页问题（Angular 5 Material 设计）

Issue with offline pagination over dynamic MatTable with matInput's (Angular 5 Material Design)

angular

typescript

material-design

angular5

angular-material-5