Question

我正在使用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预处理程序引起的，或者我有错误，但是请有人可以解释吗？

Answer 1

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

 onCellValueChanged: this.onCellValueChanged.bind(this),

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

有关此here

的更多信息

网格栅格渲染导致未定义从事件启动的服务组件

1 个答案: