Альтернативный метод для setTimeout в Angular

Question

Я сейчас работаю над проектом Angular, который является новым для меня. У меня есть требование, когда мне нужно установить значение раскрывающегося списка кендо в состояние по умолчанию после выбора опции.

.ts file

griddefaultItem = { text: 'Grid Actions', value: '' };
gridActions = [
{ text: 'Customize Grid Display', value: 'CGD' },
{ text: 'Download Grid To Excel', value: 'DGE' }
];

gridDisplay(obj: OptionalList) {
setTimeout(() => {
  this.gridselectedValue = this.griddefaultItem[0];
}, 10);
if (obj.value === 'CGD') {
  this.gridActionValue = true;
  this.getPopupDef();
  this.getPopupDetails();
}
}

html

<kendo-dropdownlist data-test-id="GA_B" [data]="gridActions" [defaultItem]="griddefaultItem" [textField]="'text'"
  [valueField]="'value'" (selectionChange)="gridDisplay($event)" [(value)]="gridselectedValue" class="dropdown_list"
  [popupSettings]="{ width: 170 }">
</kendo-dropdownlist>

Здесь я пытаюсь установить элемент по умолчанию после выбора параметра из раскрывающегося списка. При использовании setTimeout он работает, но я получил отзыв, чтобы не использовать его. Есть ли альтернативный способ сделать это? Спасибо.

Answer 1

Вместо вызова setTimeout можно сделать следующее:

• Установить gridselectedValue на новое значение
• Вызвать ChangeDetectorRef.detectChanges
• Установить gridselectedValue к значению по умолчанию

constructor(private changeDetectorRef: ChangeDetectorRef) {}

gridDisplay(obj: { text: string; value: string }) {
  this.gridselectedValue = obj;                   // <-- set new selected value
  this.changeDetectorRef.detectChanges();         // <-- run change detection
  this.gridselectedValue = this.griddefaultItem;  // <-- reset selected value
  // Do more processing here...
}

См. этот стек для демонстрации.