在关闭事件时清除 Angular DropDownList 数组答案

【问题标题】：Clear Angular DropDownList array on close event在关闭事件时清除 Angular DropDownList 数组
【发布时间】：2021-07-30 10:28:30
【问题描述】：

我在 Angular 中有一个 kendo-dropdownlist 元素，如下所示：

 <kendo-dropdownlist [filterable]="true"
                     [data]="simpleData" [textField]="'name'" [valueField]="'id'"
                     [(ngModel)]="myData.selected"
                     (filterChange)="filterData($event)" required>
 </kendo-dropdownlist>

我想实现：每次用户键入时，我都会在服务器上过滤 simpleData，如果他从列表中选择一个值，一切都好；如果他没有选择值，我希望我的 simpleData 数组重置。

我尝试使用： (close)="onCloseDropDown($event)" 但问题是在 selectionChange 事件之前触发了 close 事件，所以我不能这样做：

  onCloseDropDown(event: any) {
    if(this.myData.selected == null) { 
      this.simpleArticles = []
    }
  }

因为 myData.selected 尚未更新。

谢谢！

【问题讨论】：

试试this. simpleData = []

标签： javascript angular events kendo-ui

【解决方案1】：

根据Kendo UI for Angular 的文档，模糊事件将在最后执行。所以，目前你正在努力实现的目标！这个 blur() 事件会帮助你，

请在 kendo-dropdownlist 组件中添加此部分来修改您的 html 代码

(blur)="blur()"

或者用下面的代码替换你的html代码

<kendo-dropdownlist 
  [filterable]="true"
  [data]="simpleData" 
  [textField]="'name'" 
  [valueField]="'id'"
  [(ngModel)]="myData.selected"
  (filterChange)="filterData($event)" 
  (blur)="blur()" <!-- I have added this Blur Event Here -->
  required>
 </kendo-dropdownlist>

在你的 component.ts 文件中，定义 blur 方法

blur() {
  // Execute your statements or anything else that you want to achieve.
}

【讨论】：