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

Question

我正在使用农业网格。请有人解释一下：如果我有一种方法来准备 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 预处理器引起的，或者我有一个错误，但是有人可以解释一下吗？

Answer 1

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

 onCellValueChanged: this.onCellValueChanged.bind(this),

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

关于此的更多信息

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

ag-grid rendering causes service component initiated from event to be undefined

typescript

ag-grid

angular