Angular 10中如何正确获取ngx-datatable resize事件的携带属性

你取不到column和newValue属性，不是代码逻辑出错，是Angular 10配套的ngx-datatable稳定版本（v16.x~v19.x）存在两处容易踩的坑：

• 根组件的resize事件没有做触发源隔离：同一个输出事件同时承载两类触发逻辑——一类是浏览器窗口/外层容器尺寸变化时，由ResizeObserver触发的表格重算事件（载荷为容器宽高数值，不含任何列相关信息）；另一类是用户拖动列头调整列宽时触发的列变更事件（这才是文档里描述的、携带列信息的事件）。
• 文档描述和实际代码不匹配：老版本源码中，列宽调整事件的载荷根本不是文档写的{column, newValue}结构对象，而是一个二元数组——[被调整的列对象, 调整后的新宽度值]。你直接取resizeEvent.column当然会返回undefined，因为数组本身不存在名为column的键。

• 绕开DevTools预览的误导
  控制台的对象预览面板会保留对象的实时引用，经常会显示对象后续变更后的属性，和事件触发时刻的真实结构不一致。换用深拷贝序列化的方式打印事件的真实结构：

onColumnResize(resizeEvent) {
  // 深拷贝后打印，避免对象引用回溯的干扰
  console.log('事件真实结构：', JSON.parse(JSON.stringify(resizeEvent)));
}

如果打印结果显示当前事件是纯数值、DOM结构对象，没有数组或列信息，说明你当前捕获的是容器尺寸变化触发的事件，根本不是列宽调整的事件。

• 兼容老版本的载荷结构
  在事件处理函数中自动判断事件结构，兼容数组格式和新版本的对象格式，直接取值：

onColumnResize(resizeEvent) {
  let targetColumn;
  let newWidth;
  // 适配19.x老版本的数组结构
  if (Array.isArray(resizeEvent)) {
    targetColumn = resizeEvent[0];
    newWidth = resizeEvent[1];
  // 适配文档描述的新版本对象结构
  } else {
    targetColumn = resizeEvent.column;
    newWidth = resizeEvent.newValue;
  }
  console.log('被调整的列信息：', targetColumn, '调整后的新宽度：', newWidth);
}

• 从根源避开事件混淆
  不要给根组件ngx-datatable绑定resize事件，直接给单个ngx-datatable-column组件绑定自身的resize事件。这个事件是列组件内部触发的，没有和容器resize事件的逻辑混同，载荷结构固定：

<ngx-datatable>
  <ngx-datatable-column 
    [resizeable]="true"
    (resize)="onColumnResize($event)"
  >
  </ngx-datatable-column>
</ngx-datatable>

这种绑定方式拿到的事件参数，不会混入DOM容器的尺寸信息，和其他触发源的参数完全隔离，不需要做额外的结构判断。

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