ag-grid 渲染导致从事件启动的服务组件未定义答案

【问题标题】：ag-grid rendering causes service component initiated from event to be undefinedag-grid 渲染导致从事件启动的服务组件未定义
【发布时间】：2019-01-27 10:31:16
【问题描述】：

我正在使用 ag-grid。请有人解释一下：如果我有一种方法来准备 GridOptions，我在其中设置了一个 onCellValueChanged 事件。这会调用一个服务组件来访问数据库，该数据库也用于填充数据。事件激活时的服务组件是未定义的。如果我将事件声明移动到 html 模板，它会触发事件并定义服务组件。

所以html模板中定义的事件起作用了

      <ag-grid-angular #agGridProject class='ag-theme-bootstrap' style="width:100%; height: 650px;" [gridOptions]="gridOptions"
    (cellValueChanged)="onCellValueChanged($event)"></ag-grid-angular>

这不是：

      private prepareGrid() {
        this.gridOptions = <GridOptions>{
          columnDefs: this.ColumnDefs,
          enableSorting: true,
          enableFilter: true,
          rowSelection: 'single',
          rowHeight: 22,
          animateRows: true,
          pagination: true,
          enableColResize: true,
          // onCellValueChanged: this.onCellValueChanged,
          onGridReady: this.onGridReady,
          context: {
            componentParent: this
          }
        };

包含服务的事件触发的方法：

  private onCellValueChanged(params: any) {
    const projectData = params.data;
    console.log(params.data);
    const model = new UpdateProjectRequest(projectData.firmId, projectData.description, projectData.notes);
    console.log(new Date().toUTCString(), projectData.id, model);
    const e = this.stratoApiProjectService;
    this.stratoApiProjectService.updateProject(projectData.id, model);
  }

我怀疑这个问题是由 Typescript 预处理器引起的，或者我有一个错误，但是请有人解释一下吗？

【问题讨论】：

标签： angular typescript ag-grid

【解决方案1】：

当您使用网格选项注册 onCellValueChanged 时，您需要确保您的组件上下文像这样传递 -

 onCellValueChanged: this.onCellValueChanged.bind(this),

在您当前的设置中，onCellValueChanged 内的this 指的是它自己的范围而不是组件范围。

更多关于here

【讨论】：