angular - Ag-grid(Angular 2) 无法访问 CellRenderer 中的组件字段

Question

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

我在 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 函数中不可访问。

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

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

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