Angular中存储ag-grid的onRowClicked事件数据时遇undefined问题

你遇到的这个问题我之前也碰到过，核心原因是JavaScript里的this上下文绑定问题。当你直接把this.rowClicked赋值给gridOptions.onRowClicked时，ag-grid在触发这个回调函数的时候，会以普通函数的方式调用它，此时函数内部的this指向的是ag-grid的grid实例，而不是你的OilTypesComponent组件实例。所以你在rowClicked里给this.selectedOil赋值，其实是给grid对象加了个属性，组件自己的selectedOil成员变量根本没被赋值，自然在delete方法里访问的时候就是undefined了。

下面给你几种可行的解决方案：

解决方案1：用箭头函数保留组件的this上下文 #

箭头函数不会创建自己的this，它会继承外层上下文的this（也就是你的组件实例）。修改ngOnInit里的gridOptions赋值即可：

export class OilTypesComponent implements OnInit { 
  ... 
  selectedOil : any; 
  gridOptions: GridOptions = <GridOptions>{}; 

  ngOnInit() { 
    this.gridOptions = { 
      ... 
      onCellEditingStopped: (event) => this.cellEdited(event), // 同样处理cellEdited，避免踩同样的坑
      onRowClicked: (event) => this.rowClicked(event) 
    } 
  } 

  rowClicked(event){ 
    this.selectedOil = event.data; 
  } 

  delete(){ 
    console.log(`Deleting ${this.selectedOil.manufacturer}`); 
  }
}

解决方案2：提前用bind绑定this到组件实例 #

在ngOnInit里，先把rowClicked和cellEdited方法的this绑定到组件实例，再赋值给gridOptions：

export class OilTypesComponent implements OnInit { 
  ... 
  selectedOil : any; 
  gridOptions: GridOptions = <GridOptions>{}; 

  ngOnInit() { 
    // 手动绑定this到组件实例
    this.rowClicked = this.rowClicked.bind(this);
    this.cellEdited = this.cellEdited.bind(this);

    this.gridOptions = { 
      ... 
      onCellEditingStopped: this.cellEdited, 
      onRowClicked: this.rowClicked 
    } 
  } 

  rowClicked(event){ 
    this.selectedOil = event.data; 
  } 

  delete(){ 
    console.log(`Deleting ${this.selectedOil.manufacturer}`); 
  }
}

解决方案3：直接在gridOptions里写箭头函数逻辑 #

如果你的rowClicked逻辑比较简单，也可以直接把逻辑写在gridOptions的箭头函数里，省去单独的方法：

export class OilTypesComponent implements OnInit { 
  ... 
  selectedOil : any; 
  gridOptions: GridOptions = <GridOptions>{}; 

  ngOnInit() { 
    this.gridOptions = { 
      ... 
      onCellEditingStopped: (event) => {
        // 在这里直接写cellEdited的逻辑
      },
      onRowClicked: (event) => {
        this.selectedOil = event.data;
      } 
    } 
  } 

  delete(){ 
    console.log(`Deleting ${this.selectedOil.manufacturer}`); 
  }
}

内容的提问来源于stack exchange，提问作者Mika571