Angular Kendo UI连接列表框自定义操作异常：下移项触发两次

是的，你必须为两个连接的Listbox分别创建独立的ViewChild引用，这正是导致下移操作执行两次的核心原因。

问题根源 #

你的实现中，两个Listbox没有被明确区分实例，自定义下移操作的事件逻辑同时作用在了两个Listbox组件上，或者同一个ViewChild引用同时指向了两个组件，导致单次点击触发了两次moveDown动作。

具体修复步骤 #

1. 为每个Listbox添加唯一模板引用
   在模板中给两个Listbox分别设置不同的引用变量：

   <kendo-listbox #listbox1 [data]="sourceData" ...></kendo-listbox>
   <kendo-listbox #listbox2 [data]="targetData" ...></kendo-listbox>
   

2. 声明独立的ViewChild引用
   在组件类中分别获取两个Listbox的实例：

   import { ViewChild } from '@angular/core';
   import { ListBoxComponent } from '@progress/kendo-angular-listbox';
   
   // ...
   @ViewChild('listbox1') listbox1: ListBoxComponent;
   @ViewChild('listbox2') listbox2: ListBoxComponent;
   

3. 针对目标实例执行下移操作
   在自定义下移的处理函数中，判断当前选中项所属的Listbox，调用对应实例的moveDown()方法：

   onMoveDown(): void {
     // 根据选中项所在列表，调用对应Listbox的下移方法
     if (this.listbox1.selectedItems.length > 0) {
       this.listbox1.moveDown();
     } else if (this.listbox2.selectedItems.length > 0) {
       this.listbox2.moveDown();
     }
   }
   

4. 检查事件绑定是否重复
   确保工具栏的下移按钮没有同时绑定到两个Listbox的事件流中，避免因事件冒泡或重复注册导致动作执行多次。

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