Angular中Kendo多选下拉框事件this指向异常问题求助

使用Angular 13.2.0 + Kendo UI for Angular 2+开发时，给多选下拉框配置itemDisabled属性以禁用部分选项，运行后报错：

ERROR TypeError: this.checkItemDisabled is not a function

问题根源是itemDisabled回调中的this指向Kendo下拉框实例而非组件实例，导致无法访问组件内的方法或成员，且无法直接向回调传递额外参数，需解决this指向问题。

现有实现代码 #

HTML代码 #

<kendo-multiselect [data]="itemList" textField="id" valueField="id" [valuePrimitive]="true"                             
        [maxlength]="dataItem.maxAllowedItems"
        [itemDisabled]="itemDisabled">                              
 </kendo-multiselect>

TypeScript代码 #

itemDisabled(itemArgs: { dataItem: DropdownItem, index: number }) { 
     return this.checkItemDisabled(itemArgs.dataItem);
}
checkItemDisabled(dataItem:DropdownItem){
     // 自定义条件判断逻辑
     // 根据条件返回true（禁用）或false（启用）
}

方法1：用箭头函数定义回调 #

箭头函数会捕获当前上下文的this，确保始终指向组件实例：

// 改为箭头函数
itemDisabled = (itemArgs: { dataItem: DropdownItem, index: number }) => { 
     return this.checkItemDisabled(itemArgs.dataItem);
};

checkItemDisabled(dataItem:DropdownItem){
     // 自定义条件判断逻辑
     return true/false;
}

方法2：在构造函数中手动绑定this #

通过bind()方法强制把itemDisabled的this绑定到组件实例：

constructor() {
  // 绑定this指向组件
  this.itemDisabled = this.itemDisabled.bind(this);
}

itemDisabled(itemArgs: { dataItem: DropdownItem, index: number }) { 
     return this.checkItemDisabled(itemArgs.dataItem);
}

checkItemDisabled(dataItem:DropdownItem){
     // 自定义条件判断逻辑
     return true/false;
}

方法3：模板内直接使用箭头函数（不推荐） #

虽然可以在模板中直接写箭头函数，但每次变更检测都会创建新函数，可能引发性能问题，仅作参考：

<kendo-multiselect [data]="itemList" textField="id" valueField="id" [valuePrimitive]="true"                             
        [maxlength]="dataItem.maxAllowedItems"
        [itemDisabled]="(itemArgs) => this.itemDisabled(itemArgs)">                              
 </kendo-multiselect>

内容的提问来源于stack exchange，提问作者Mehul Patel