Angular5: Как связать события в асинхронно загруженных данных с таблицами данных

Question

Загружаю данные таблицы через ajax, который включает кнопки редактирования и удаления, и теперь, когда я пытаюсь получить доступ к определенной кнопке через привязку событий, она не работает

вот часть HTML

<div class="widget-body no-padding">
<sa-datatable [options]="tableData" paginationLength="true" tableClass="table table-striped table-bordered table-hover" width="100%">
    <thead>
        <tr>
            <th data-hide="phone"> ID </th>
            <th data-class="expand"> Name </th>
            <th data-hide="phone,tablet"> Email </th>
            <th data-hide="phone,tablet"> Role </th>
            <th data-hide="phone,tablet"> join Date </th>
            <th data-hide="phone,tablet"> Action </th>
        </tr>
    </thead>
</sa-datatable>

и в компоненте загружаю данные через ajax

tableData = {
ajax: (data, callback, settings) => {
  this.usersService.getUsers(0).subscribe(data => {
    if(data.success){
        callback({
          aaData: data.data
        });
    } else {
      alert(data.msg);
    }
  },
  error => {
      alert('Internal server error..check database connection.');
  });
},
columns: [ 
    { 
      render: function (data, type, row, meta) {
          return meta.row + meta.settings._iDisplayStart + 1;
      }
    },
    {
      data: function (name) { return  name.firstname+ ' ' + name.lastname; }
    }, 
    {data: 'email'},
    {data: 'user_role'}, 
    {data: 'created_at'},
    {          
      render: function (data, type, row) {
        return `<ul class="demo-btns">\
                  <li> <span (click)="edit()" class="btn btn-primary btn-xs"><i class="fa fa-gear"></i> Edit</span></li>\
                    <li> <span class="btn btn-danger btn-xs"><i class="fa fa-gear"></i> Delete</span></li>\
                </ul>`;
      }
    }
],
buttons: [
    'copy', 'pdf', 'print'
]};

edit(){
console.log('Clicked..');}

когда я загружаю данные через ajax, создается впечатление, что элементы dom не создаются, и именно поэтому они не генерируют никаких событий. Может ли кто-нибудь, пожалуйста, дайте мне знать, как я могу слушать события по нажатию кнопки любым другим способом.

Answer 1

Ребята, наконец, я нашел рабочий код после внесения нескольких изменений с использованием addEventListner, вот код, который будет полезен для кого-то.

tableData: any;
 ngOnInit() {  
    tableData = {
              ajax: (data, callback, settings) => {
                this.usersService.getUsers(0).subscribe(data => {
                  if(data.success){
                      callback({
                        aaData: data.data

                      });
                  } else {
                    alert(data.msg);
                  }
                },
                error => {
                    alert('Internal server error..check database connection.');
                });
              },
              columns: [ 
                  { 
                    render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                  },
                  {
                    data: function (name) { return  name.firstname+ ' ' + name.lastname; }
                  }, 
                  {data: 'email'},
                  {data: 'user_role'}, 
                  {data: 'created_at'},
                  {          
                    render: function (data, type, row) {
                      return `<button type="button" class="btn btn-warning btn-xs edit" data-element-id="${row._id}">
                      <i class="fa fa-pencil-square-o"></i> Edit</button>`;
                    }
                  }
              ],
              buttons: [
                  'copy', 'pdf', 'print'
              ]
            };

            document.querySelector('body').addEventListener('click', (event)=> {
                let target = <Element>event.target; // Cast EventTarget into an Element
                if (target.tagName.toLowerCase() === 'button' && $(target).hasClass('edit')) {
                  this.user_edit(target.getAttribute('data-element-id'));          
                }   
            });

              user_edit(user_id){
                console.log("user edit:" +user_id);
                // Here goes the edit login
              }
}

Answer 2

Используйте угловую директиву click для эффективного прослушивания и рендеринга DOM. https://docs.angularjs.org/api/ng/directive/ngClick

Answer 3

Это может быть реализовано через прослушивание событий

    tableData = {
    ajax: (data, callback, settings) => {
      this.usersService.getUsers(0).subscribe(data => {
        if(data.success){
            callback({
              aaData: data.data
            });
        } else {
          alert(data.msg);
        }
      },
      error => {
          alert('Internal server error..check database connection.');
      });
    },
    columns: [ 
        { 
          render: function (data, type, row, meta) {
              return meta.row + meta.settings._iDisplayStart + 1;
          }
        },
        {
          data: function (name) { return  name.firstname+ ' ' + name.lastname; }
        }, 
        {data: 'email'},
        {data: 'user_role'}, 
        {data: 'created_at'},
        {          
          render: function (data, type, row) {
            return `<button type="button" class="btn btn-warning btn-xs edit" data-element-id="${row._id}"><i class="fa fa-pencil-square-o"></i> Edit</button>`;
          }
        }
    ],
    buttons: [
        'copy', 'pdf', 'print'
    ]

      };

      ngAfterViewChecked() {

    document.querySelector('body').addEventListener('click', (event)=> {
        let target = <Element>event.target;// Cast EventTarget into an Element
        if (target.tagName.toLowerCase() === 'button' && $(target).hasClass('btn-warning')) {
            this.user_edit(target.getAttribute('data-element-id'));
        }   
    });

  }

      user_edit(userId){
        console.log("user edit:", userId);
      }