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

发布时间：2020-12-17 07:21:46 所属栏目：安全来源：网络整理

导读：尝试在使用cellRenderer创建的按钮的click事件上调用服务方法时,我遇到此问题. 我正在使用带有Angular2的ag-grid. { headerName: 'Update',field: "update",width: 80,cellRenderer : this.updateRecord }updateRecord(params) { var eDiv = document.create

尝试在使用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

此外,我无法访问任何我的组件变量.

cellRenderer位于不同的上下文中,因此在updateRecord函数中无法访问它.

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

以这种方式在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;
  }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!