行中带有组按钮的数据表中的问题 - angular4

Posted 2023-05-09

【中文标题】行中带有组按钮的数据表中的问题 - angular4

【英文标题】：issue in datatables with group button in row - angular4

【发布时间】：2018-03-21 06:24:46

【问题描述】：

我在我的angular4 应用程序中使用datatables 插件，我正在尝试添加dropdownmenu，但是当我点击按钮时它没有显示

如上所示，如果我单击任何行的编辑按钮，它不会显示任何下拉菜单，我也尝试添加单个按钮并调用 editRow() 但它没有调用该方法，就像我单击时一样datatable 之外的编辑按钮显示菜单。

这是我在组件中添加编辑按钮的方式...

options = 
    dom: "Bfrtip",
    ajax: (data, callback, settings) => 
        this.productService.getProducts().subscribe((data) => 
        callback(
            aaData: data
        )
        )
    ,
    columns: [
         data: "product" ,
         data: "dept" ,
          mRender : function(data, type, row) 
            return '<div class="btn-group dropdown" dropdown>'+
            '<button class="btn btn-default btn-sm dropdown-toggle txt-color-magenta"  dropdownToggle>'+
            '<i class="fa fa-gear fa-lg"></i>'+
            '<i class="fa fa-caret-down"></i>'+
            '</button>'+
            '<ul *dropdownMenu class="dropdown-menu">'+
            '<li> <a (click)="editRow("'+data+')">Action</a> </li>'+
            '<li><a (click)="callMeTwo()">Another action</a></li>'+
            '<li><a (click)="callMeThree()">Something else here</a></li>'+
            '<li class="divider"></li><li><a (click)="(null)">Separated link</a></li>'+
            '</ul>'+
            '</div>'
        
        
    ],
    buttons: ['copy', 'excel', 'pdf', 'print']
;

根据数据表论坛发现 here 或 here 如果我添加如下...

options = 
    dom: "Bfrtip",
    ajax: (data, callback, settings) => 
        this.productService.getProducts().subscribe((data) => 
        callback(
            aaData: data
        )
        )
    ,
    columns: [
         data: "product" ,
         data: "dept" ,
         defaultContent: '<ul class="demo-btns"> <li>' +
        '<a (click)="callMeOne()" class="btn btn-success"><i class="fa fa-pencil-square-o"></i> </a>'+
        '</li>' ,
    ],
    buttons: ['copy', 'excel', 'pdf', 'print']
;

得到Cannot read property 'nodeName' of null 错误，请帮助我如何让它工作。谢谢。

【参考方案1】：

我想通了，终于让它工作了......只需在<button class="btn btn-default btn-sm dropdown-toggle txt-color-magenta" data-toggle="dropdown"> 中添加data-toggle，但现在click 函数在锚标记<li> <a (click)="editRow(row)" class="btn btn-success">Action</a> </li> 中不起作用，当我点击它假设的操作时调用 editRow 函数但它没有。 当我选择一行时，我也无法弄清楚如何调用一个函数，比如RowSelected。