Angular16中使用angular-slickgrid v6报错：Property 'detail'不存在于Event类型

问题原因 #

angular-slickgrid v6的(onClick)事件传递的是自定义事件对象，无需通过$event.detail获取数据，直接使用$event即可访问事件参数。原写法是旧版本的用法，在v6中已调整，导致TypeScript类型校验报错。

修正步骤 #

1. 修改HTML模板的事件绑定
   移除$event.detail，直接将$event传入处理方法：

<angular-slickgrid gridId="grid1"
                   [columnDefinitions]="columnDefinitions"
                   [gridOptions]="gridOptions"
                   [dataset]="dataset"
                   (onClick)="onCellClicked($event)"
                   >
</angular-slickgrid>

2. 修正TypeScript的事件处理方法
   使用angular-slickgrid提供的OnEventArgs类型（替代any），直接从参数中解构出eventData和args，通过args.item获取当前点击的行数据：

import { OnEventArgs } from '@slickgrid-universal/common';

// 保留你的gridOptions配置
this.gridOptions = {
  enableAutoResize: false,
  enableSorting: true,
  gridHeight: 400,
  gridWidth: 1500,
  enableFiltering: true,
  enableExcelExport: true, 
  registerExternalResources: [new ExcelExportService()]
};

onCellClicked(eventArgs: OnEventArgs) {
  const { eventData, args } = eventArgs;
  const clickedRow = args.item; // 当前点击的行数据
  console.log('点击的行:', clickedRow);
  console.log('原始事件:', eventData);
}

额外说明 #

• 如果不需要严格类型校验，也可以用any类型接收参数，但推荐使用官方提供的类型以获得更好的开发体验。
• 若要获取多选选中的行，可以通过grid实例的getSelectedRows()方法，比如在事件中调用args.grid.getSelectedRows()获取。

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