您可以为 ag-grid Angular 中的不同行指定不同的 customCellRenderer

Question

我已经构建了这个简单的网格：

用户从 ParenColumn 的列表 1 中选择一个选项。
根据他选择的选项，第 2 列将显示不同的列表。 例如，如果他选择了 option3，那么列表 3 将显示在相应行的第二列中。
问题是：由于第二列中的 customCellRenderer 应用于所有行，因此相同的列表将显示在所有行中，如图所示。
我的问题是：是否可以为每一行“赋予”它自己的 cellRenderer？
这是 ChildColumn 定义：

 {
          headerName: "ChildColumn",
          field: "chdCol",
          cellRenderer:  (params) => {
            return(
                   `       <select class="form-control">
                <br>`
                +`<option>` +
                this.receivedChosenOptionfromCol1[0]
                +`</option>`
                +`<option>` +
                this.receivedChosenOptionfromCol1[1]
                +`</option>` +
                `<option>` +
                this.receivedChosenOptionfromCol1[2]
                +`</option>` +
                `<option>` +
                this.receivedChosenOptionfromCol1[3]
                +`</option>` +
              `</select>
            `)
          } 

要查看我用于实现此网格及其功能的全部代码，请查看我回答自己问题的 StackOverflow 代码：
How to refresh a column B in ag-grid based on a change that occured in another column A

谢谢:)

Answer 1

您可以执行以下操作

      cellRenderer:  this.getCellRenderer

然后定义getCellRenderer函数

function getCellRenderer(params) {
    // Check condition to render renderer 1 or 2
    // Replace condition
    if (true) {
        return "<h1> Component 1 </h1>"
    } else {
        return "<h1> Component 2 </h1>"
    }
}

为单元格渲染器提供一个函数使其动态化，因为每次更改网格值时都会调用它。