Добавление кнопки в каждый ряд таблицы данных с событием в угловых 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"
          }
        ],
        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, потому что он вызывает проблемы в таблицах данных. Спасибо.

Answer 1

Вы можете сделать это, используя defaultContent ключ в столбце объекта данных. Сначала вам нужно создать <th> для отображения столбца кнопки. Я создал стек для того, чтобы достичь этого. Пожалуйста, внимательно прочитайте комментарии, которые я добавил в этот стек, прежде чем применять его в своей логике. Я добавил три кнопки, которые показывают данные текущей строки. См .: Кнопки в датированных