时间戳

首页 > 解决方案 > 将按钮添加到具有角度 2 事件的数据表的每一行

angular - 将按钮添加到具有角度 2 事件的数据表的每一行

问题描述

我需要在数据表中每一行的末尾有一个按钮，并在单击它时获取行值。请在下面查看我的代码。

在我的 .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"
          }
        ],
        language: {
          search: "_INPUT_",
          searchPlaceholder: "Search records",
        }
      });

    })
  }

在我的，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>

        </tr>
    </thead>

</table>

你能帮我怎么做吗？我不能使用 *ngFor 循环，因为它会导致数据表出现问题。谢谢你。

标签： angulardatatables

解决方案

您可以使用数据defaultContent表的列对象中的键来执行此操作。首先，您需要创建一个<th>用于显示按钮列。我创建了一个堆栈闪电战来实现这一目标。在您的逻辑中实施之前，请仔细阅读我在该 stackblitz 中添加的评论。我在其中添加了三个显示当前行数据的按钮。请参阅：数据表中的按钮

推荐阅读