У меня есть контроль связывания mat-autocomplete (почти 30 тыс. Записей) внутри mat-таблицы.Здесь пользователю разрешено изменять значения в режиме автозаполнения и сохранять таблицу соответствия.
Если пользователь выбирает какие-либо другие значения в элементе управления автозаполнением в нескольких строках таблицы соответствия и сохраняет данные.
Если мы перепривязываем таблицу mat, все выбранные элементы mat-autocomplete отображаются с последним значением из mat-autocomplete.
Но здесь объект источника данных обновляется правильно.
Обновление и сохранение значений в mat-autocomplete
После обновления последнего значения установки таблицы Mat.[Здесь источник данных в порядке, объект 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";
};
}
Таблица матов помещается в контейнер, и онанаходится в элементе управления вкладками, по нажатию вкладки мы загружаем и привязываем мат-таблицу