Question

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

表的行数是基于另一个matInput的动态的（在示例中我称为“ range”），因此，我将数字放在matInput上的称为“ range”，并且行是通过离线动态创建的分页器。

这是我的问题，如果我需要创建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>

在带有MatInput的动态MatTable上进行离线分页的问题（Angular 5 Material Design）

1 个答案: