单击事件未触发Angular 2中使用的数据表的每一行的按钮

时间:2018-10-31 09:22:49

标签: angular datatables

我需要获取数据表中一行的值。我有创建按钮的代码,但是当我单击它时,什么也没有发生。即使只是简单的警报也不会发生。请在下面查看我的代码。

.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>

您能告诉我如何做到这一点吗?谢谢。

编辑 添加了html部分。

0 个答案:

没有答案