У меня есть случай, когда когда вы выбираете параметр в раскрывающемся списке FieldOne
в режиме редактирования, он выполняет асинхронный вызов c для получения новых параметров данных для раскрывающегося списка FieldTwo
. Проблема в том, что когда пользователь выбирает параметр в FieldOne
, кажется, что он обновляет параметры в других строках, изменяя их значение.
HTML:
<kendo-grid
[selectable]="selectableSettings"
[loading]="loading"
[navigable]="true"
(edit)="editHandler($event)"
(save)="updateHandler($event)"
(cancel)="cancelHandler($event)"
(selectedKeysChange)="onSelectedKeysChange($event)"
[selectedKeys]="mySelection"
[kendoGridSelectBy]="mySelectionKey"
[resizable]="true"
[data]="gridData$ | async">
<!-- this dropdown makes call when selected in edit mode -->
<kendo-grid-column field="FieldOne" title="FieldOne" width="180">
<ng-template kendoGridCellTemplate let-dataItem>
{{ getDropDownItem(dataItem.FieldOne, fieldOne$['value'])?.text }}
</ng-template>
<ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="formGroup">
<kendo-dropdownlist
[data]="fieldOne$ | async"
(valueChange)="onDropDownChange('FieldOne', $event, formGroup)"
(selectionChange)="fieldOneSelectionChange($event, this, dataItem, formGroup )"
textField="text"
valueField="value"
[valuePrimitive]="true"
[formControl]="formGroup.get('FieldOne')">
<ng-template kendoDropDownListItemTemplate let-dataItem>
{{ dataItem.text }}
</ng-template>
</kendo-dropdownlist>
</ng-template>
</kendo-grid-column>
<!-- This dropdown gets new data when FieldOne makes the call -->
<kendo-grid-column field="FieldTwo" title="FieldTwo" width="180">
<ng-template kendoGridCellTemplate let-dataItem>
{{ getDropDownItem(dataItem.FieldTwo, fieldTwo$['value'])?.text }}
</ng-template>
<ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="formGroup">
<kendo-dropdownlist
[data]="fieldTwo$ | async"
(valueChange)="onDropDownChange('FieldTwo', $event, formGroup)"
(selectionChange)="fieldTwoSelectionChange($event, this, dataItem, formGroup)"
textField="text"
valueField="value"
[valuePrimitive]="true"
[formControl]="formGroup.get('FieldTwo')">
<ng-template kendoDropDownListItemTemplate let-dataItem>
{{ dataItem.text }}
</ng-template>
</kendo-dropdownlist>
</ng-template>
</kendo-grid-column>
</kendo-grid>
Angular / TypeScript :
public fieldOneSelectionChange(selectedOption): void {
// Gets new dropdown data for FieldTwo's dropdown
this.fieldTwo$ = this.FieldTwoServiceCall(selectedOption);
}
Как настроить таргетинг только на одну строку, чтобы получить новые данные и не повлиять на другие строки?
Этот гиф показывает, что происходит: