事件侦听器无法与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>
            `;
          }
        } 

哪种呈现方式：

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

  

UpdateRisqueBrut

这是侦听器的定义：

 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']
}

在“网格”选项上，侦听单元格值已更改

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。

希望这会有所帮助。