web-dev-qa-db-ja.com

ボタンクリックでのAg-Grid cellRender

私はangular 5をag-gridデータテーブルで使用していますが、ここではcellRendererを使用してセルからクリックイベントをトリガーすることはできません

_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_をインストールする必要がありますか？

javascripttypescriptangular5ag-gridag-grid-ng2
6
YuvaMac

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

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

上記のコードはほんの一部です。チェックアウト完全な例on Stackblitz

10
T4professor

@ T4professorからの回答を拡張するために、クリックボタンに動的なラベルを付けるコードを投稿します。

// Author: T4professor

import { Component, OnInit, AfterContentInit } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-button-renderer',
  template: `
    <button class="{{btnClass}}" type="button" (click)="onClick($event)">{{label}}</button>
    `
})

export class ButtonRendererComponent implements ICellRendererAngularComp {
    //https://stackblitz.com/edit/angular-ag-grid-button-renderer?file=src%2Fapp%2Fapp.component.ts
  params: any;
  label: string;
  getLabelFunction: any;
  btnClass: string;

  agInit(params: any): void {
    this.params = params;
    this.label = this.params.label || null;
    this.btnClass = this.params.btnClass || 'btn btn-primary';
    this.getLabelFunction = this.params.getLabelFunction;

    if(this.getLabelFunction && this.getLabelFunction instanceof Function)
    {
      console.log(this.params);
      this.label = this.getLabelFunction(params.data);
    }

  }

  refresh(params?: any): boolean {
    return true;
  }

  onClick($event) {
    if (this.params.onClick instanceof Function) {
      // put anything into params u want pass into parents component
      const params = {
        event: $event,
        rowData: this.params.node.data
        // ...something
      }
      this.params.onClick(params);

    }
  }
}

次に、グリッドのあるコンポーネントで次のことを行います。

columnDefs = [

    {
      headerName: 'Publish',
      cellRenderer: 'buttonRenderer',
      cellRendererParams: {
        onClick: this.onRowPublishBtnClick.bind(this),        
        label: 'Publish',
        getLabelFunction: this.getLabel.bind(this),
        btnClass: 'btn btn-primary btn-sm'
      }
    }  
]

onRowPublishBtnClick(e) {    
    this.rowDataClicked = e.rowData;
  }

  getLabel(rowData)
  {    
    console.log(rowData);
    if(rowData && rowData.hasIndicator)
      return 'Republish';
      else return 'Publish';
  }
1
Dragos Durlut

この問題は、drop（）を誤って呼び出すため、this.drop（）に変更する必要があるために発生します。

一般に、単純なロジックでcellRendererプロパティを使用する必要があります。複雑なロジックレンダラーのより便利な方法は、cellRendererFramework：YourCustomRendererAngularComponentを使用することです。

columnDefs = [
{
  headerName: 'Col Name',
  cellRendererFramwork: MyAngularRendererComponent, // RendererComponent suffix it is naming convention
  cellRendererParams: {
    onClick: (params) => this.click(params);  
  }
},
...
]

MyAngularRendererComponentはAgRendererComponentを実装する必要があります。

また、angular MyAngualrRendererComponentを使用するモジュールでは、このコードを忘れずに置いてください：

@NgModule({
 imports: [
   AgGridModule.withCompoennts([
      MyAngualrRendererComponent 
   ])
 ]
})
0
CREZi