向角度为2的事件的数据表的每一行添加按钮 [英] Adding button to each row of a datatable with event in angular 2

问题描述

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

I need to have a button at the end of each row in my datatable and get the row values when I click on it. Please see my code below.

在我的.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循环，因为它会导致数据表出现问题。谢谢。

Can you please help me how to this right. I can't use the *ngFor loop because it causes issues int the datatables. Thank you.

推荐答案

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

You can do it using defaultContent key in columns object of datatable. First you need to create a <th> for showing the button column. I have created a stackblitz for achieving this. Please read the comments i have added in that stackblitz carefully before implementing it in your logic. I have added three buttons in it which show the data of current row. See: Buttons In Datatable

这篇关于向角度为2的事件的数据表的每一行添加按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！