Angular 6 Datatables为按钮添加点击事件答案

【问题标题】：Angular 6 Datatables Add click event for buttonAngular 6 Datatables为按钮添加点击事件
【发布时间】：2019-03-18 17:43:00
【问题描述】：

所以，我似乎无法在任何地方找到答案。

我试图使用this 效果很好的“服务器方式”，直到您发现限制。就像“选择”插件不起作用，或者你不能使用“扩展”表

所以，我需要回到本机使用 Datatable。

假设我这样定义我的表

this.dtOptions = {
  ajax: (dataTablesParameters: any, callback: any) => {
    this.myService.myEndPoint(dataTablesParameters).
    subscribe((resp: any) => {
      this.attributes = resp.aaData;

      callback({
        recordsTotal: resp.iTotalRecords,
        recordsFiltered: resp.iTotalDisplayRecords,
        data: resp.aaData
      });
    });
  },
  select: true,
  order: [2, "asc"],
  columns: [{
      data: null,
      defaultContent: 'details',
      orderable: false,
      class: 'details-control'
    },
    {
      data: null,
      orderable: false,
    },
    {
      data: "skuPartNumber",
      orderable: true,
    },
    {
      data: "activeUnits",
      orderable: true
    },
    //{ data: "consumedUnits", orderable: true }
    {
      title: "Display Name",
      data: null,
      orderable: true,
      render: (data, type, full) => `<button (click)="testClick(data.id)">sdfsdf</button>`
    }
  ]
};

如何监听按钮事件？我的假设是在 AJAX 和数据表完成之前呈现（编译）页面？

我可以在 knockoutJS 和 durandal 中做到这一点，但在 Angular 中无法解决

【问题讨论】：

您能详细说明一下吗？
我在 Angular 处理页面后添加 HTML（带有按钮和点击事件）。如何让事件触发？一定是个办法，就是不知道怎么弄
我应该更清楚.. 我需要重新绑定（不确定术语）Angular。我需要在“Angular”上下文中，所以我可以将数据从行传递到函数中。就像一个 id 或其他东西。

标签： angular datatables

【解决方案1】：

如果您使用服务器端渲染，您可以在drawCallback (docs) 上定义您的点击事件

this.dtOptions = {
    ...
    "drawCallback": ()=>{
        //define your listeners here
    }
    ...

【讨论】：

“在这里定义你的听众”到底是什么样的？那是我不知道的。
为您的按钮定义事件监听器。类似document.getElementById('idOfButton').addEventListener('click',testClick(5))

【解决方案2】：

您可以在drawCallback 中捕获事件。

let table = $('#example').DataTable({
      drawCallback: () => {
        $('.buttonClass').on('click', () => {  //click event on button with class `buttonClass`
            this.nextButtonClickEvent();
          });
      }
    });

参考这个有表格分页的demo https://stackblitz.com/edit/angular-datatables-pagination

【讨论】：

我应该更清楚.. 我需要重新绑定（不确定术语）Angular。我需要在“Angular”上下文中，所以我可以将数据从行传递到函数中。就像一个 id 或其他东西。