☰

Ag-Grid cellRender ボタンクリックで質問する

tag-icon • tag-icon javascript typescript angular5 ag-grid ag-grid-ng2
Ag-Grid cellRender ボタンクリックで質問する

私はag-gridデータテーブルを備えたAngular 5を使用していますが、cellRendererを使用してセルからクリックイベントをトリガーできません。ここではag-grid --> colDefsをどのように使用していますか？

this.columnDefs = [
            {headerName: '#', rowDrag: true, width: 75},
            {headerName: 'One', field: 'fieldName',
                cellRenderer : function(params){
                    return '<div><button (click)="drop()">Click</button></div>'
                }
            }
];

drop() {
    alert("BUTTON CLICKEFD")
}

使用している場合onClick="alert("123")"--> 動作しますが、使用できず、onClick="drop()"未定義のドロップがスローされます。

私もcellRenderer内でこれを試しました --> params =params.$scope.drop = this.drop;

gridOptions を使用するとangularCompileRows : trueエラーが発生します。Cannot read property '$apply' of undefined.インストールする必要がありますかag-grid enterprise?

ベストアンサー1

ボタン コンポーネントと一緒に使用できますcellRenderer。テーブル上のユーザーからのボタンのクリック イベントを取得する場合は、必要なコールバック関数を宣言するだけですcellRendererParams。

// app.component.ts
columnDefs = [
{
  headerName: 'Button Col 1',
  cellRenderer: 'buttonRenderer',
  cellRendererParams: {
    onClick: this.onBtnClick.bind(this),
    label: 'Click'
  }
},
...
]

上記のコードはほんの一部です。完全な例の上スタックブリッツ

おすすめ記事