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

Question

我可以在每行数据表中放置一个按钮，但该按钮没有任何 function，而且我不知道如何向该按钮添加删除事件。 有人能帮我吗？ 希望你也给我演示；） *ps：另外，如何在打印、导出按钮上放置背景颜色。 className: red(on TS) and.red{ background-color: red;}(on CSS) didn't work out:/ *another 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>

Answer 1

您可以查看此 演示

您需要在删除过程后重新渲染。 您可以添加如下按钮并为其提供 function。

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

在组件中，您需要重新渲染 function

 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();
}