web-dev-qa-db-ja.com

ag-grid gridOptions.api undefined in angular 2

TypeScriptを使用してangular2でag-gridを試していますが、何らかの理由でag-grid APIを使用できず、未定義のエラーが発生します。

ここにコードがあります。

import { AgRendererComponent } from 'ag-grid-ng2/main';
import { GridOptions, RowNode } from 'ag-grid/main';
import { GridOptionsWrapper } from 'ag-grid/main';
import { GridApi } from 'ag-grid/main';

public gridOptions: GridOptions;

constructor()
 {
    this.gridOptions = <GridOptions>{};

    alert(this.gridOptions);
    alert(this.gridOptions.api); // *** getting undefined  ***


    this.gridOptions = <GridOptions>{
        columnDefs: this.columnDefs(),
        rowData: this.rowData,
        onSelectionChanged: this.onSelectionChanged,
        groupSelectsChildren: true,
        suppressRowClickSelection: true,

        rowSelection: 'multiple',
        enableColResize: true,
        enableSorting: true,
        rowHeight: 45}

}//constructor

アドバイスしてください、ありがとう

以下のコメントのコードで更新

onGridReady() {
    console.log(this.gridOptions.api); // here it work
    this.selectedRows = this.gridOptions.api.getSelectedRows();
    console.log(this.selectedRows);
}

private testClick(event): void {
    try {
        console.log(this.gridOptions.api); // here gives error
        this.selectedRows = this.gridOptions.api.getSelectedRows();
        console.log(this.selectedRows); //getting error saying undefined
    }
}
angularag-grid
10
Sankaranarayanan

2つの問題...

最初に、他の人が述べたように、onGridReadyでグリッドAPIへの参照を初期化します。

_onGridReady(params) {
    this.gridApi = params.api;
}
_

第2に、ag-gridが提供されたハンドラーの1つ（例：rowClicked）を呼び出すと、thisはangularコンポーネントインスタンスではなくなるため、testClick()でメソッド_this.gridOptions === undefined_。

AgGridイベントコールバックでangularコンポーネントのプロパティにアクセスするには、次のように_GridOptions.context_を介してthisを渡す必要があります。

_this.gridOptions = <GridOptions>{
     context: {parentComponent: this},
     ...other lines
_

AgGridのイベントは、（一般的には）イベントパラメータでこのコンテキストオブジェクトへの参照を返します。

_rowClicked(rowClicked: RowClickedEvent) {
    const localGridApiRef = rowClicked.context.parentComponent.gridApi;

    // do stuff with the grid api...
    const selectedRows = localGridApiRef.getSelectedRows();
};
_

注：testClick()の使い方はわかりませんが、私のrowClicked()は交換可能です。

注2-GridApiは実際にはRowClickedEventのプロパティであるため、示されているようにコンテキストオブジェクトを介して取得する必要はありませんが、プロパティにアクセスするポイントを示しています/ agグリッドイベントのangularコンポーネントのメソッドは、AgGridEventのcontextプロパティを介して実行できます。

6
mounds

グリッドのgridOptionsイベントが呼び出されると、gridReady AP​​Iが設定され、使用できるようになります。

テストしている行では、gridOptionsは空のオブジェクトです。これを行った後でも、次のようになります。

this.gridOptions = <GridOptions>{
     columnDefs: this.columnDefs(),
     ...other lines

それでもAPIは利用できません。gridReadyまたはAngularのngOnInitイベントにフックすれば、APIを安全に呼び出すことができます。

6
Sean Landsman

コンポーネントのライフサイクルが原因です。 constructorではまだ初期化されていません。 （私はあなたがgridOptionsオブジェクトをあなたのグリッドに適切に割り当てたと仮定しています。）

それを使ってみてください

ngOnInit() { 
    console.log(this.gridOptions.api)
}

ドキュメントから

ngOnInit Angularの後にディレクティブ/コンポーネントを初期化します。最初にデータバインドプロパティを表示し、ディレクティブ/コンポーネントの入力プロパティを設定します。

ライフサイクルに関する詳細情報を取得 ここ 。

0
Sefa

AngularJSを使用しているときに、これに関する答えを探していました。 （AngularJS固有の問題ではありませんでしたが）私と同じ問題に終わった他の人にとっては、HTMLでテーブルを正しく呼び出していなかったことがわかりました。テーブルが呼び出されなかったため、APIがセットアップされず、gridReadyが実行されませんでした。私が使用した構文はうまくいきました：

<div class="table-body">
  <div ag-grid="$ctrl.gridOptions" class="ag-theme-fresh ag-grid-container"></div>
</div>
0
Maxx Garcia

これを試してください：

export class MyComponent implements OnInit {
  selected = () => console.log('ID: ', this.gridOptions.api.getSelectedRows()[0].id);

  gridOptions: GridOptions = {
    columnDefs: [
        {headerName: 'ID', field: 'id', width: 80},
        { ... }
    ],
    rowSelection: 'single'
  }

  ngOnInit() {
    this.gridOptions.rowData = this.gridData;
    this.gridOptions.onSelectionChanged - this.selected;
  }

それは私のために働いた！

0
Guenther

私はvue.jsを使用していました同じ問題がありました。しかし、問題を解決したag-grid-vueコンポーネントに：gridOptions = "gridOptions"を含めた場合

0
pradeep ponduri