2

mat-table 内に mat-autocomplete コントロール (ほぼ 30k レコード) をバインドしています。ここで、ユーザーはオートコンプリートで値を変更し、マットテーブルを保存できます。

ユーザーがマットテーブルの複数の行でオートコンプリートコントロールで異なる値を選択して保存した場合。

mat-table を再バインドすると、mat-autocomplete で選択したすべての項目が mat-autocomplete の最後の値で表示されます。

しかし、ここではデータ ソース オブジェクトが適切に更新されています。

mat-autocomplete で値を更新して保存する

マットテーブル設定の最後の値を更新した後。[ここでは、データ ソースは問題なく、正しい値を持つ 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 に答える