Кнопка рендеринга Angular Jquery Datatable, событие Click не работает

Question

Кнопка отображается сценарием, но не может прикрепить событие щелчка.

  import { Component, OnInit } from '@angular/core';
  declare var $: any;
  @Component({
    selector: 'app-hospital-manage',
    templateUrl: './hospital-manage.component.html',
    styleUrls: ['./hospital-manage.component.scss']
  })
  export class HospitalManageComponent implements OnInit {
    IsEdit = false;
    HospitalID = null;
    constructor() {}

    ngOnInit() {
      const t = $('#example').DataTable({
        processing: true,
        serverSide: true,
        info: true,
        ajax: {
          url: 'http://localhost:35257/data/searchhospital',
          data: function(data) {
            delete data.columns;
          }
        },
        // scrollY: 300,
        deferRender: true,
        // scroller: true,
        columns: [
          { data: 'HospitalName' },
          {
            render: function(data, type, item, meta) {
              return '<a class="btn btn-warning btn-sm" onclick="MyFunction()"><i class="fa fa-pencil"></i></a>';
            }
          }
        ],
        columnDefs: [{ orderable: false, targets: [0] }], // to disable columns order, may cause error if not put correctly
        order: [[1, 'asc']],
        select: true,
        dom: 'lfrtip',
        //  responsive: true,
        buttons: true,
        language: {
          emptyTable:
            '<div class="text-warning text-center">No Carton found.</div>'
        }
      });
    }

    public MyFunction() {
      alert();
    }
  }

Answer 1

В конце добавьте еще одно свойство для datatable с именем rowCallback.

`language: {
    emptyTable:
    '<div class="text-warning text-center">No Carton found.</div>'
},
rowCallback: (row: Node, data: any[] | Object, index: number) => {
    const self = this;
    // Unbind first in order to avoid any duplicate handler
    // (see https://github.com/l-lin/angular-datatables/issues/87)
    $('td', row).unbind('click');
    $('td', row).bind('click', () => {
    self.someClickHandler(data);
    });
    return row;
}
`

Это сработало для меня. Проверьте эту ссылку для получения дополнительной информации- [https://l -lin.github.io / угловатые-DataTables / # / расширенный / строка-клик-событие]

Answer 2

попробуйте это:

render: function(data, type, item, meta) {
              return '<a class="btn btn-warning btn-sm" (click)="MyFunction()"><i class="fa fa-pencil"></i></a>';
            }