将删除按钮内的删除事件添加到 Angular 上的每一行数据表中，并将背景颜色添加到按钮中答案

【问题标题】：Add delete event inside delete button to each row of Datatables on Angular and add background-color into button将删除按钮内的删除事件添加到 Angular 上的每一行数据表中，并将背景颜色添加到按钮中
【发布时间】：2020-06-04 09:34:42
【问题描述】：

我可以在每行数据表中放置一个按钮，但该按钮没有任何功能，而且我不知道如何向该按钮添加删除事件。有人能帮我吗？希望你也给我演示；） *ps：另外，如何将背景颜色放在打印、导出按钮上。 className : red（在 TS 上）和 .red{ background-color : red;}（在 CSS 上）没有成功：/ *另一个 ps：我正在使用 datatables.net

TS 文件

products: any = (data as any).default;
ngOnInit(): void {
this.dtOptions = {
 ajax: {
        url: '',
        type: 'GET',
        dataType: 'json',
      },

      columns: [
        {
          title: 'ID',
          data: 'id',
        },
        {
          title: 'Name',
          data: 'name',
        },
        {
          title: 'Gender',
          data: 'gender',
        },
        {
          title: 'Option',
          data: null,
          defaultContent:
            '<button class="btn-delete type="button">Delete</button>',
          targets: -1,
        },

       ],
      dom: 'Bfrtip',
      buttons: [
        { extend: 'excel', text: 'Export' },
        {
          text: '<i class="fa fa-files-o"></i>',
          action: function (e, dt, node, config) {
            dt.ajax.reload();
          },
        },
        {
          extend: 'print',
          text: 'Print',
        },
      ],
    };
}

html

<table
  datatable
  [dtOptions]="dtOptions"
  class="mc row-border hover">
</table>

【问题讨论】：

你能创建 stackblitz 演示吗？
仍在尝试，不知道为什么数据表没有出现 ://

标签： javascript jquery angular ajax datatables

【解决方案1】：

你可以查看这个Demo

您需要在删除过程后重新渲染。您可以添加如下按钮并为其赋予功能。

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let person of persons">
      <td>{{ person.id }}</td>
      <td>{{ person.firstName }}</td>
      <td>{{ person.lastName }}</td>
      <td><button class="btn-delete" (click)="deleterow(person)">Remove</button> </td>
    </tr>
    <tr *ngIf="persons?.length == 0">
      <td colspan="4" class="no-data-available">No data!</td>
    </tr>
  </tbody>
</table>

在组件中你需要重新渲染功能

 deleterow(person){
    console.log(person);
    //here do delete event
    const that = this;
    this.rerender()
 }
 rerender(): void {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance.destroy();
      this.dtTrigger.next();
    });
 }

并更改您的 afterinit

ngAfterViewInit(): void {
    this.dtTrigger.next();
}

【讨论】：