Question

我尝试在使用cellRenderer创建的按钮的click事件上调用服务方法时遇到此问题。

我正在使用带有Angular2的ag-grid。

{ headerName: 'Update', field: "update", width: 80, cellRenderer : this.updateRecord }


updateRecord(params) {
    var eDiv = document.createElement('div');
    eDiv.innerHTML = '<span class="my-css-class"><button class="edit">Edit</button></span>';
    var eButton = eDiv.querySelectorAll('.edit')[0];
    eButton.addEventListener('click', function() {
      this.myService.getAll().subscribe(data => console.log(JSON.stringify(data)))
    });
    return eDiv;
  }

我收到以下错误：

EXCEPTION: Cannot read property 'getAll' of undefined

另外，我无法访问任何组件变量。

Answer 1

cellRenderer位于不同的上下文中，因此this函数无法访问updateRecord。

您需要在context中初始化gridOptions参数，并在params对象中使用它。

以这种方式在context对象中设置gridOptions

this.gridOptions.context = {
            myService: this.myService
        }

您的myService将在context媒体资源中提供。

updateRecord(params) {
    var eDiv = document.createElement('div');
    eDiv.innerHTML = '<span class="my-css-class"><button class="edit">Edit</button></span>';
    var eButton = eDiv.querySelectorAll('.edit')[0];
    eButton.addEventListener('click', function() {
      params.context.myService.getAll().subscribe(data => console.log(JSON.stringify(data)))
    });
    return eDiv;
  }

Ag-grid（Angular 2）无法访问CellRenderer中的组件字段

1 个答案: