Мат-автозаполнение, связанное внутри таблицы матов, имеет проблему - Angular 5 - PullRequest
0 голосов
/ 11 декабря 2018

У меня есть контроль связывания mat-autocomplete (почти 30 тыс. Записей) внутри mat-таблицы.Здесь пользователю разрешено изменять значения в режиме автозаполнения и сохранять таблицу соответствия.

Если пользователь выбирает какие-либо другие значения в элементе управления автозаполнением в нескольких строках таблицы соответствия и сохраняет данные.

Если мы перепривязываем таблицу mat, все выбранные элементы mat-autocomplete отображаются с последним значением из mat-autocomplete.

Но здесь объект источника данных обновляется правильно.

Обновление и сохранение значений в mat-autocomplete image

После обновления последнего значения установки таблицы Mat.[Здесь источник данных в порядке, объект json имеет правильные значения]

image

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";
  };
}

Таблица матов помещается в контейнер, и онанаходится в элементе управления вкладками, по нажатию вкладки мы загружаем и привязываем мат-таблицу

1 Ответ

0 голосов
/ 15 апреля 2019

У меня была та же проблема, и я решил ее с помощью формы Reactive.Создать FormGroup -> FormArray (mat-table) -> FormControlName для элемента ввода.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...