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

Question

我在我的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']
};

根据在这里或这里找到的数据表论坛，如果我像下面这样添加...

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错误的Cannot read property 'nodeName' of null ，请帮助我如何使其工作。 谢谢。

Answer 1

我想通了，并最终使工作......只是要添加data-toggle在<button class="btn btn-default btn-sm dropdown-toggle txt-color-magenta" data-toggle="dropdown">但是现在click功能在锚标记<li> <a (click)="editRow(row)" class="btn btn-success">Action</a> </li>调用editRow函数，但是没有。 我也无法弄清楚当我选择一行时如何调用一个RowSelected的函数。