在mat-table内绑定的mat-autocomplet有问题-Angular 5

Question

我在mat-table内绑定了mat-autocomplete控件（近30k条记录）。 在这里，允许用户更改“自动完成”中的值并保存Mat-表。

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

如果我们重新绑定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";
  };
}

将垫子表放置在容器中，并将其放置在选项卡控件中，单击标签页后，我们将加载并绑定垫子表

Answer 1

我遇到了同样的问题，并通过使用Reactive表单解决了。 创建一个FormGroup-> FormArray（mat-table）-> FormControlName到输入元素。