0

我有一个组件，并且有一个带有一些 matInput 的空表单，并且我还有一个 mat-table，其中 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>

多谢！！:)

4

1 回答 1

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>
于 2018-07-15T08:31:28.160 回答