我如何将ag-Grid下拉列表绑定到其值直到运行时才知道的字符串数组？

Question

我在ag-Grid中定义了两列：

    {
        headerName: 'Active',
        field: 'active',
        sortable: true,
        enableCellChangeFlash: true,
        editable: true,
        cellEditor: 'popupSelect',
        cellEditorParams: {
            cellRenderer: ActiveCellRenderer,
            values: ['Active', 'Inactive']
        },
        width: 100
    },
    {
        headerName: 'Category',
        field: 'payeeCategory',
        sortable: true,
        width: 100,
        checkboxSelection: true,
        editable: function (params) {
            return (params.node.data.scheduleId === 0);
        },
        cellEditor: 'popupSelect',
        cellEditorParams: {
            cellRenderer: ActiveCellRenderer,
            values: this.Categories
        }
    },

这些列的可编辑特征实际上是相同的，除了第一列-Active-将选择选项的列表绑定到预先定义的静态数组。第二列-类别-将向用户显示在代码开发过程中未知的类别列表，而是在加载页面时从数据库中获取此列表。

public Categories: string[] = [];

private getCategories() {

    this.http.get<string[]>('./api/category').subscribe((categories: string[]): void => {
        this.Categories = categories;
        this.gridApi.setColumnDefs();
        this.gridApi.setColumnDefs(this.gridColDefs);
    }
    );
}

我已经找到了。将类别设置为类别代码的字符串数组。也许我不需要那里的setColumnDefs调用？我不知道。无论如何，它们似乎都不会影响到好事或坏事。

只需完成图片：

function ActiveCellRenderer(params) {
    return params.value;
}

没有做任何特别的事情，只是返回选择的值。

当我双击活动单元格时，会弹出一个对话框，显示两个选项：活动，不活动。

当我双击“类别”单元格时，我会弹出一个窗口，但它是空的-没有可供选择的选项。

很明显，我没有正确地将我的类别代码数组“绑定”到下拉列表中。我在做什么错？

我刚刚尝试了一个实验。我将类别重新定义为-

公共类别：字符串[] = ['Category1'，'Category2'];

现在，当我单击该单元格时，我确实看到了显示两个选项的下拉列表-Category1，Category2。所以我的网格定义是正确的。该属性显然能够填充下拉列表。我唯一不能做的就是在运行时对下拉列表进行初始化之后，将其绑定到Categories数组。必须有一种方法可以做到这一点？

更多实验-我重新定义了该列以调用函数，而不是直接分配成员变量。

cellEditorParams: {
    cellRenderer: ActiveCellRenderer,
    values: this.getCategoryArray()
}

private getCategoryArray(): string[] {
    return this.Categories;
}

我在return语句上放置了一个断点。当页面加载时，该函数仅被调用一次，此后将不再调用。因此很显然，从数据库中获取数据后，动态生成的数组并没有绑定到下拉列表。那是我问题的症结所在。关于如何实现此目标的任何想法？

感谢您的建议！

Answer 1

所以这是解决方案。全面披露-我不知道它如何运作或为什么运作，但是互联网是广泛而深入的，如果您将网络投放足够长的时间，则可以无限畅通无阻。我在这里找到了解决方案：

React and Ag-Grid: populating selectcelleditor through fetch gives 'state' of undefined

该提示适用于反应网格，但是解决方案对我有用。这是我的解决方案的代码：

这里是以json格式返回值列表的函数，我认为：

private getCategoryArray() {
    return {
        values: this.Categories
    }
}

这是将其“绑定”到ag-Grid列定义的方式，以便在运行时动态提供值。这是cellEditorParams的定义，这是此处的关键项。
    {
        headerName: 'Category',
        field: 'payeeCategory',
        sortable: true,
        width: 100,
        checkboxSelection: true,
        editable: true,
        cellEditor: "agSelectCellEditor",
        cellRenderer: ActiveCellRenderer,
        cellEditorParams: this.getCategoryArray.bind(this)
    },

再次，我不知道这是如何或为什么起作用。如果您想对此进行解释，我们将很乐意为您提供解释。谢谢！