2

我在 mat-table 中绑定了 mat-autocomplete 控件（几乎 30k 条记录）。在这里，用户可以在自动完成中更改值并保存 mat - 表。

如果用户在 mat-table 的多行中选择自动完成控制中的任何不同值并保存。

如果我们重新绑定 mat-table，所有 mat-autocomplete 选定的项目都将显示 mat-autocomplete 的最后一个值。

但这里数据源对象已正确更新。

在 mat-autocomplete 中更新和保存值

刷新 Mat-table 设置最后一个值后。[这里的数据源很好，json对象具有正确的值]

html代码

<div class="ScrollStyle">
    <mat-table [dataSource]="dataSource" class="mat-elevation-z8">
      <!-- MaterialDescription Column -->
      <ng-container matColumnDef="Gedis Class">
        <mat-header-cell *matHeaderCellDef>Gedis Class</mat-header-cell>
        <mat-cell mat-cell *matCellDef="let element"> {{element.GedisClassCode}} </mat-cell>
      </ng-container>

      <!-- ItemClass Column -->
      <ng-container matColumnDef="ItemClass">
        <mat-header-cell *matHeaderCellDef> Item Class </mat-header-cell>
        <mat-cell *matCellDef="let element">

          <mat-autocomplete #sfAuto="matAutocomplete" (optionSelected)="element.ItemClassId = $event.option.viewValue" [displayWith]="valueMapper">
            <mat-option *ngFor="let sf of filteredlistOfItemClass" [value]="sf.ItemClassId">
              {{sf.ItemClassId}}
            </mat-option>
          </mat-autocomplete>
          <mat-form-field floatLabel="never">
            <input matInput placeholder="NA000" #sfInput [formControl]="itemClassControl" [matAutocomplete]="sfAuto"
                   (input)="itemClassOnChange($event.target.value)">
          </mat-form-field>
        </mat-cell>
      </ng-container>


      <mat-header-row *matHeaderRowDef="displayedColumns" [ngClass]="mat-header-cell"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>

Typescript Code
---------------
  itemClassOnChange(val) {

    this.filteredlistOfItemClass = [];
    const value = val;
    const filterValue = value.toLowerCase();
    if (filterValue && !'') {
      this.filteredlistOfItemClass = this.listOfItemClass.filter(
        x =>
          `${x.ItemClassId}`.toLowerCase().startsWith(filterValue) 
      );
      this.sfInputTrigger.openPanel();
    }
  }

  //Used for binding selected Item class to the Itemclass auto suggest control
  public valueMapper = (key) => {
    let selection = this.filteredlistOfItemClass.find(e => e.ItemClassId === key);
    if (selection)
      return selection.ItemClassId;
    else
      return "NA000";
  };
}

垫表放置在容器中，并放置在选项卡控件中，单击选项卡页时，我们正在加载和绑定垫表

4

1 回答 1

0

我有同样的问题，并通过使用反应形式解决。为输入元素创建一个 FormGroup -> FormArray (mat-table) -> FormControlName。

于 2019-04-15T08:36:02.830 回答