Question

我目前正在从事对我来说是新的Angular项目。我有一个要求，在选择一个选项后，我需要将剑道下拉值设置为默认状态。

.ts文件

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...
}

有关演示，请参见this stackblitz。

Angular中setTimeout的替代方法

1 个答案: