2017-10-09 10 views
0

私はangular4アプリケーションでdatatablesプラグインを使用していると私はdropdownmenuを追加しようとしていますが、私はボタンをクリックしたとき、それは問題 - angular4

DataTable with Group button Menu ...

を表示されません上記のように、任意の行の編集ボタンをクリックするとドロップダウンメニューが表示されません。また、単一のボタンを追加して、editRow()を呼び出しましたが、メソッドを呼び出さなかったので、編集ボタンをクリックするとdatatableそれはメニューを示した。私は以下のように追加した場合フォーラムが... 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を得るのDataTableを1としてここ

は私が...私のコンポーネントで

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

を編集ボタンを追加してい方法ですエラー、それを動作させる方法を教えてください。ありがとう。

答えて

0

私はちょうど<button class="btn btn-default btn-sm dropdown-toggle txt-color-magenta" data-toggle="dropdown">data-toggleを追加する必要がありますが、今click機能は、私がアクションをクリックしたとき、それはeditRow関数を呼び出すと仮定したアンカータグ<li> <a (click)="editRow(row)" class="btn btn-success">Action</a> </li>に動作していないが、それはdidnの...それを考え出したし、最終的にそれがうまく作らt。 また、私は行を選択すると、関数を呼び出す方法RowSelectedと言うことができません。