为DataTables自定义按钮添加addEventListener报错：viewer未定义的解决

你遇到的Uncaught ReferenceError: viewer is not defined错误，核心原因有两个：

• 直接在defaultContent里写onClick="viewer()"时，浏览器会去全局window作用域找这个函数，但你的viewer()是Angular组件类内部的方法，根本不在全局作用域里，所以找不到。
• Angular的模板指令(click)在DataTables动态生成的DOM上不生效，因为这部分DOM不是Angular编译的，Angular不会识别这些指令。

另外你之前在ngOnInit里绑定的点击事件也有问题——这时候DataTables还没完成渲染，$('#view tbody')大概率找不到元素，而且普通函数里的this指向的是window，不是你的组件实例，所以this.dataTable也会出错。

下面给你两种可靠的解决方案：

方案一：利用DataTables API绑定点击事件（推荐） #

这种方法是通过DataTables官方API来绑定事件，既保证时机正确，又能轻松获取组件上下文：

1. 先修改dtOptions里的columns配置，移除按钮上的所有点击相关属性：

columns: [
  // 其他列配置...
  { 
    title: 'Action', 
    data: null,
    defaultContent: '<button class="btn btn-sm btn-primary"> View </button>'
  }
]

2. 在ngAfterViewInit里获取DataTables实例，绑定点击事件：

ngAfterViewInit(): void {
  // 通过ViewChild获取DataTables实例
  this.datatableElement.dtInstance.then((dt: DataTables.Api) => {
    // 给按钮绑定点击事件，用箭头函数保留组件的this上下文
    dt.on('click', 'button', (event) => {
      event.stopPropagation(); // 阻止事件冒泡（如果需要）
      // 获取当前点击行的数据
      const rowData = dt.row($(event.target).closest('tr')).data();
      console.log('当前行数据：', rowData);
      // 调用组件里的viewer方法
      this.viewer();
      // 如果需要跳路由，直接在这里写：
      // this.router.navigate(['/event-viewer']);
    });
  });
}

这样修改后，点击按钮就能正常触发组件里的viewer()方法了，还能轻松拿到当前行的数据。

方案二：通过render函数传递行标识（可选） #

如果你需要更灵活的控制，可以在render函数里给按钮添加自定义属性，然后绑定事件：

1. 修改columns的render配置：

columns: [
  // 其他列配置...
  { 
    title: 'Action', 
    data: null,
    render: function(data, type, full) {
      // 给按钮添加data-id属性，存储行的唯一标识（比如number）
      return `<button class="btn btn-sm btn-primary" data-id="${full.number}"> View </button>`;
    }
  }
]

2. 同样在ngAfterViewInit里绑定事件：

ngAfterViewInit(): void {
  this.datatableElement.dtInstance.then((dt: DataTables.Api) => {
    dt.on('click', 'button', (event) => {
      event.stopPropagation();
      const button = event.target as HTMLButtonElement;
      const incidentNumber = button.getAttribute('data-id');
      console.log('点击的工单编号：', incidentNumber);
      this.viewer();
    });
  });
}

额外注意点 #

• 不要再混用原生onClick和Angular的(click)指令在DataTables动态生成的DOM上，这两种方式都不适合Angular组件场景。
• 操作DataTables的DOM或事件时，尽量用官方API，而不是直接用jQuery选择器绑定，这样能避免渲染时机问题。

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