如何从 ag grid 中的单元格渲染器调用方法 - 创建了一个下拉单击事件而不是从选项触发？

Question

这是我的 aggrid columndef

{
  headerName: 'Type Of Pin',
  field: 'pinType',
  width: 160,
  cellRenderer: this.typeOfPin,
  suppressSorting: true
}

typeOfPin(params) {
    console.log(params);
    // const eDiv = document.createElement('div');
    // const disableVal = true;
    // eDiv.innerHTML =
    return  '<div><select placeholder="Select" class="form-control ag-form-control">' +
      '<option></option>' +
      '<option (click)="test()" selected>Number</option>' +
      '<option onClick="test()" >Random</option>' +
      '</select></div>';
}

{
  headerName: 'Type Of Pin',
  field: 'pinType',
  width: 160,
  cellRenderer: this.typeOfPin,
  suppressSorting: true
}

typeOfPin(params) {
    console.log(params);
    // const eDiv = document.createElement('div');
    // const disableVal = true;
    // eDiv.innerHTML =
    return  '<div><select placeholder="Select" class="form-control ag-form-control">' +
      '<option></option>' +
      '<option (click)="test()" selected>Number</option>' +
      '<option onClick="test()" >Random</option>' +
      '</select></div>';
}

正常选择选项正在使用 aggrid 中的 cellrenderer 动态形成单击事件无法在创建过程中绑定并建议如何解决问题我想要一个单击事件请帮助...尝试了 valueformatter 和除方法之外的所有方法我无法调用。 ...

Answer 1

得到了解决方案。首先在单元格渲染器中放置bind(this)，然后执行以下相同操作。您可以传递下拉菜单的值。

希望这可以帮助。

{
    headerName: 'Type Of Pin',
    field: 'pinType',
    width: 160,
    cellRenderer: this.typeOfPin.bind(this),
    suppressSorting: true
}

typeOfPin(params) {
    console.log(params);
    const eDiv = document.createElement('div');
    // tslint:disable-next-line:no-this-assignment
    const self = this;
    eDiv.innerHTML =
        '<select placeholder="Select" class="form-control ag-form-control">' +
        '<option></option>' +
        '<option value="number">Number</option>' +
        '<option value="random">Random</option>' +
        '</select>';
    eDiv.addEventListener('change', () => {
        console.log('button clicked');
        self.test(event.target.value);
    });

    return eDiv;
}