事件侦听器不适用于 ag-grid Angular 中的自定义单元格渲染器

Question

我已经设置了一个简单的列定义：

{
          headerName: "Probabilité",
          headerToolName: "Consultez les échelles",
          field: "pbt",
          editable: true,
          cellRenderer: params => {
            return `
            <hr>
            <select class="form-control"  (change)="UpdateRisqueBrut($event.target);"
            >
                <br>
                <option>1- Très improbable</option>
                <option>2- Peu probable</option>
                <option>3- Possible</option>
                <option>4- Probable</option>
  </select>
  <hr>
            `;
          }
        } 

以这种方式呈现：

您可能已经注意到，我在自定义单元格渲染中设置了一个侦听器，称为记录在打字稿列表中选择的选项。

更新RisqueBrut

这是监听器的定义：

 public UpdateRisqueBrut(risque) {
    console.log(risque.value);
  }

选择该选项后，我没有收到任何错误，但控制台中没有任何显示。
我做错什么了吗？

Answer 1

也可以通过AgGrid实现'agSelectCellEditor / agPopupSelectCellEditor'

headerName: 'Probabilité',
field: 'make',
editable: true,
cellEditor:'agSelectCellEditor',
cellEditorParams: {
    values: ['1- Très improbable','2- Peu probable','3- Possible','4- Probable']
}

On Grid 选项监听单元格值的变化

onCellValueChanged: function(event) {
        console.log('onCellValueChanged: Probabilité' + ' = ' + event.newValue);
    },

我还能够通过以下更改实现您的代码

{headerName: "Probabilité",
     editable: true, 
     cellRenderer: params => {
              return `
              <hr>
              <select onchange="myFunction(this)">
                  <option value='1- Très improbable'>1- Très improbable</option>
                  <option value='2- Peu probable'>2- Peu probable</option>
                  <option value='3- Possible'>3- Possible</option>
                  <option value='4- Probable'>4- Probable</option>
              </select>
              <hr>`;
            }
      }

function myFunction(t)
{
  console.log(t.value);
}

工作演示链接是here。

希望这会有所帮助。