Angular Kendo Grid双复选框选中行集合及行数据获取问题

我看你现在的问题核心在于自定义子复选框的点击事件没有正确关联到组件逻辑，也没传递必要的行数据。咱们一步步来修正：

问题根源 #

1. 你用了原生onclick="ChildSelect($event)"，但ChildSelect是Angular组件里的私有方法，全局作用域根本访问不到它，而且$event里也没有index属性，自然拿不到对应行的数据。
2. 没有把当前行的dataItem或索引传递给点击方法，没法定位到具体的记录。

解决方案 #

1. 修改HTML中的子复选框绑定

把原生onclick换成Angular的(click)事件绑定，直接传递当前行的dataItem和索引，同时可选添加选中状态同步：

<kendo-grid-column field="" title="" width="40">
  <ng-template kendoGridCellTemplate let-dataItem let-idx="rowIndex">
    <input 
      type="checkbox" 
      id="childRow{{ idx }}" 
      (click)="ChildSelect(dataItem, idx, $event)"
      [checked]="childrenSelected.includes(dataItem.id)" <!-- 保持分页/过滤后的选中状态 -->
    />
  </ng-template>
</kendo-grid-column>

2. 修正TypeScript中的ChildSelect方法

现在可以直接拿到dataItem，不用再通过索引猜数据，同时维护childrenSelected数组跟踪选中的子记录：

// 把private改为public，让模板可以调用
public childrenSelected: number[] = [];

public ChildSelect(dataItem: ContactModel, idx: number, event: MouseEvent): void {
  const checkbox = event.target as HTMLInputElement;
  const contactId = dataItem.id;

  if (checkbox.checked) {
    // 避免重复添加
    if (!this.childrenSelected.includes(contactId)) {
      this.childrenSelected.push(contactId);
    }
  } else {
    // 移除已取消选中的ID
    this.childrenSelected = this.childrenSelected.filter(id => id !== contactId);
  }

  // 现在可以直接操作当前行数据了
  console.log("选中的子记录:", dataItem);
  console.log("所有选中的子记录ID:", this.childrenSelected);
}

3. 合并按钮逻辑优化

在onClick方法里，你可以直接拿到父记录（selectedRows）和子记录（childrenSelected）的ID集合，执行合并操作：

public onClick(): void {
  const keepIds = this.selectedRows.map(row => row.id);
  const mergeIds = this.childrenSelected;

  console.log("要保留的记录ID:", keepIds);
  console.log("要合并的记录ID:", mergeIds);

  // 这里调用你的合并业务逻辑，比如：
  // this.contactService.mergeContacts(keepIds, mergeIds).subscribe(...);
}

4. 额外提示：选中状态持久化

如果你的Grid有分页、过滤或排序操作，gridView会动态更新，此时[checked]="childrenSelected.includes(dataItem.id)"能确保复选框的选中状态不会丢失。

关键总结 #

• 永远用Angular的事件绑定(click)代替原生onclick，这样能保持组件上下文，直接访问组件内的方法和数据。
• 传递dataItem比传递索引更可靠——Grid的视图数据可能因为分页、过滤变化，索引对应的记录会变，但dataItem是当前行的真实数据。

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