Question

我正在项目中使用angular datatables模块，我使用rowrollback函数配置了一个函数，以便在单击行时执行操作。但是在使用时，我无法点击我的行中的按钮，例如为每一行设计的操作（例如删除修改客户端）。

我尝试不在我的dtconfig对象中添加Actions列，但它使得我的数据表不会被触发。

这是我的代码：

dtOptions：

dtOptions = {
            pagingType: 'full_numbers',
            pageLength: 10,
            columns: [{
                title: 'Current Owner',
                data: 'CurrentOwner'
            },{
                title: 'Doc Hash',
                data: 'hash'
            },{
                title: 'Doc Name',
                data: 'name'
            },{
                title: 'Doc Owner',
                data: 'DocumentOwner'
            },{
                title: 'Time Stamp',
                data: 'Timestamp'
            },{
                title: 'Actions',
                data: 'actions'
            }],
            rowCallback: (row: Node, data: Object |any[] , index: number) => {

                try{
                    const self = this;
                    // Unbind first in order to avoid any duplicate handler
                    // (see https://github.com/l-lin/angular-datatables/issues/87)
                    $('td', row).unbind('click');
                    $('td', row).bind('click', () => {
                        let X ={};
                        Object.assign(X,data);
                        console.log(X)
                        console.log(this.Certificates[index]);
                        self.DetailedCertificate=this.Certificates[index];
                        $(this.detailRef.nativeElement);
                        $(this.detailRef.nativeElement).modal("show");
                    });
                    return row;
                }
                catch (e){
                    console.error("error"+e);
                }
            }

HTML表：

<tr *ngFor="let row of dataRows" class=".row" >
                  <td style="text-overflow: ellipsis; overflow-wrap: break-word">{{row.CO}}</td>
                  <td>{{row.KC}}</td>
                  <td>{{row.DocName}}</td>
                  <td>{{row.DocOwner}}</td>
                  <td>{{row.TimeStamp}}</td>
                  <td class="text-right">
                    <button   class="btn btn-lg btn-simple btn-info btn-icon" (click)="CO(row.KC,row.DocOwner)"><i class="material-icons">person_pin_circle</i></button>
                    <button  class="btn btn-lg btn-simple btn-danger btn-icon" (click)="RC(row.KC,row.DocOwner)"><i class="material-icons">close</i></button>
                  </td>
                </tr>

Answer 1

以下是角度表的一个示例，它可以实现您想要的效果。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  dataRows: any[] = [
    { kc: 'kc1', docName: 'Document 1', docOwner: 'Johnny', timeStamp: 'last week'},
    { kc: 'kc2', docName: 'Document 2', docOwner: 'Jacob', timeStamp: 'yesterday'},
    { kc: 'kc3', docName: 'Document 3', docOwner: 'Jingleheimer', timeStamp: 'today'},
    { kc: 'kc4', docName: 'Document 4', docOwner: 'Schmidt', timeStamp: 'tomorrow'}
  ];

  buttonInRowClick(event: any): void {
    event.stopPropagation();
    console.log('Button in the row clicked.');
  }

  wholeRowClick(): void {
    console.log('Whole row clicked.');
  }
}

<table>
  <tr>
    <th>KC</th>
    <th>Doc Name</th>
    <th>Doc Owner</th>
    <th>Time Stamp</th>
    <th>Button</th>
  </tr>
  <tr *ngFor="let row of dataRows" (click)="wholeRowClick()">
    <td>{{row.kc}}</td>
    <td>{{row.docName}}</td>
    <td>{{row.docOwner}}</td>
    <td>{{row.timeStamp}}</td>
    <td><button (click)="buttonInRowClick($event)">do thing</button></td>
  </tr>
</table>

此行将函数调用添加到ngFor生成的每一行。

<tr *ngFor="let row of dataRows" (click)="myFunction()">...</tr>

确保行内按钮上的点击事件不会影响整体行点击的关键是添加 event.stopPropagation（）;

在嵌套按钮调用的函数中。

Answer 2

您可以通过在AfterViewInit界面中使用jquery调用来调用CO（）函数，如下所示。并通过在html

中将其设置为id来获取'row.KC'值

 ngAfterViewInit(){
    var _thisDoc = this;
    $('#user-table').on('click', '.btn-circle', function(){
      _thisDoc.CO(this.id);
    });
  }

  CO(e) {
    console.log(e); //row.KC value
  }

配置行单击事件时，Angular数据表无法单击行按钮

2 个答案: