Событие щелчка не запускается на кнопке каждого ряда таблицы данных, используемой в Angular 2

Question

Мне нужно получить значение строки в таблице данных. У меня есть коды, которые создают кнопки, но когда я нажимаю на них, ничего не происходит. Даже простого предупреждения не происходит. Пожалуйста, смотрите мой код ниже.

.ts

ngOnInit() {
    this.getUsers();
  }

  getUsers() {
    this.us.getUsers()
      .subscribe((data: any) => {
      this.users = data;

      var table = $('#datatables').DataTable({
        "pagingType": "full_numbers",
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        responsive: true,
        data:this.users,
        columns:[
          {
            data:"Id"
          },
          {
            data:"FirstName"
          },
          {
            data:"MiddleName"
          },
          {
            data:"LastName"
          },
          {
            data:"UserName"
          },
          {
            data:"Email"
          },
          {
            data:"DateAdded"
          },
          {
            data:"IsActivated"
          },
          {
            data: null,
            defaultContent: '<div class="btn-group">' +
                        '<button type="button" (click)="onView()" class="btn btn-info btn-xs dt-view" style="margin-right:16px;"><span class="glyphicon glyphicon-eye-open glyphicon-info-sign" aria-hidden="true"></span></button>' + 
                        '<button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button>' + 
                        '<button type="button" class="btn btn-danger btn-xs dt-delete"><span class="glyphicon glyphicon-remove glyphicon-trash" aria-hidden="true"></span></button></div>'
          }
        ],
        language: {
          search: "_INPUT_",
          searchPlaceholder: "Search records",
        }
      });

    })
  }

  onView() {
    alert("View button clicked");
  }

ниже, как я реализую это в HTML .html

<table id="datatables" class="table table-striped table-bordered table-hover" cellspacing="0"
    width="100%" style="width:100%">
    <thead>
        <tr>
            <th>Id</th>
            <th>FirstName</th>
            <th>MiddleName</th>
            <th>LastName</th>
            <th>UserName</th>
            <th>Email </th>
            <th>DateAdded</th>
            <th>Activated</th>
            <th>Action</th>
        </tr>
    </thead>

</table>

Не могли бы вы показать мне, как это правильно? Спасибо.

EDIT Добавлена ​​HTML-часть.