Javascript 角度数据表，can'；配置行单击事件时，不要单击行按钮

我在项目中使用angular datatables模块，我使用

rowrollback

函数配置了一个函数，以便在单击行时执行操作。但当使用该选项时，我不能单击行中的按钮，比如为每行设计的操作（例如删除修改客户端）

我试图不在我的

dtconfig

对象中添加Actions列，但它使我的datatable没有被触发

这是我的密码：

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

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

HTML表格：

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

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

{{row.CO}}
{{row.KC}}
{{row.DocName}
{{row.DocOwner}}
{{row.TimeStamp}
人·品·圈
关闭

下面是一个角度表格的示例，它可以实现您想要的功能

从'@angular/core'导入{Component}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
标题=‘应用程序’；
数据行：任意[]=[
{kc:'kc1'，文档名：'Document 1'，文档所有者：'Johnny'，时间戳：'last week'}，
{kc:'kc2'，docName:'document2'，docOwner:'Jacob'，timeStamp:'昨天'}，
{kc:'kc3'，docName:'Document 3'，docOwner:'jinglehimer'，timeStamp:'today'}，
{kc:'kc4'，docName:'document4'，docOwner:'Schmidt'，时间戳：'tomery'}
];
按钮行单击（事件：任意）：无效{
event.stopPropagation（）；
log（'单击行中的按钮'）；
}
wholeRowClick（）：无效{
log（'单击整行'）；
}
}

KC
文档名称
文档所有者
时间戳
按钮
{{row.kc}}
{{row.docName}
{{row.docOwner}}
{{row.timeStamp}
做事

您可以在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
  } 

---

您提到的是使单击该行不会触发单击该行内的按钮。我想做的是单击按钮而不是行。我发布的代码允许您：1）为行单击触发函数。2） 在行内单击按钮触发功能（如编辑、删除等），而不触发整个行功能。我已经编辑了我的答案以澄清我的意思。很抱歉，它不起作用，甚至从行中删除

click

事件也不起作用。按钮什么也不发射。