当我使用一种方法填充行时，ag-grid Cell Renderer停止工作

Question

如您所见，我有一个非常简单的网格：

这是其html代码：

<ag-grid-angular
  style="width: 500px; height: 500px;"
  class="ag-theme-balham"
  [enableSorting]="true"
  [enableFilter]="true"
  [pagination]="true"
  [rowData]="getRowData()"
  [columnDefs]="columnDefs"
  [frameworkComponents]="frameworkComponents"
>
</ag-grid-angular>

这是其对应的打字稿代码：

columnDefs = [
    {
          headerName: "Probabilité",
          headerToolName: "Consultez les échelles",
          cellRenderer: 'dropDownCellRendererComponent'
        },
        {
          headerName: "RiskBrut",
          headerToolName: "Consultez les échelles",
          field: "RskBrt",
        }
  ];
  rowData = [{}];
  frameworkComponents = {
    dropDownCellRendererComponent: DropDownCellRendererComponent
  };
  public getRowData() {
    var rowData = [];
    for (var i = 0; i < 1; i++) {
        rowData.push({RskBrt: 'Risk1' });
        rowData.push({RskBrt: 'Risk2'});
        rowData.push({RskBrt: 'Risk3'});
        rowData.push({RskBrt: 'Risk4'});
    }
//THis makes the dropDown list stop working
    return rowData;
}

第一列具有在另一个组件中定义的自定义单元格渲染器：

<select class="form-control">
    <br>
    <option id="1">1- Très improbable</option>
    <option id="2">2- Peu probable</option>
    <option id="3">3- Possible</option>
    <option id="4">4- Probable</option>
</select>

我的问题是，当我添加填充第二列的方法时：

public getRowData() {
    var rowData = [];
    for (var i = 0; i < 1; i++) {
        rowData.push({RskBrt: 'Risk1' });
        rowData.push({RskBrt: 'Risk2'});
        rowData.push({RskBrt: 'Risk3'});
        rowData.push({RskBrt: 'Risk4'});
    }
//THis makes the dropDown list stop working
    return rowData;
}

第一列中的dropList停止工作。即：它没有打开。
我真的不明白为什么会这样。
为什么以这种方式填充第二列会导致dropDown列表在第一列中停止正常运行。

有帮助吗？