How do I Bind ag-Grid Dropdown to Array of Strings whose Values are not Known until Run Time?

问题

I have two columns defined in my 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
        }
    },

The editable characteristics of these columns are virtually identical, except that the first column - Active - binds the list of selection choices to a static array which is defined ahead of time. The second column - Category - will present the user with a list of categories which is not known during code development, rather this list is fetched from the database when the page is loaded.

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);
    }
    );
}

I've traced into this. Categories is being set to a string array of category codes. Maybe I don't need those calls to setColumnDefs in there? I don't know. In any case they don't seem to be affecting anything either for good or for bad.

Just to complete the picture:

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

Not doing anything special, just returning the selected value.

When I double-click the Active cell I get a pop-up presenting two options: Active, Inactive.

When I double-click the Category cell I get a pop-up but it is empty - no options to select.

Clearly I am not 'binding' my array of category codes properly to the dropdown. What am I doing wrong?

I just tried an experiment. I redefined Categories as -

public Categories: string[] = ['Category1', 'Category2'];

Now, when I click that cell I do see the drop down presenting the two options - Category1, Category2. So my grid definition is correct. The property is clearly able to populate the dropdown. The only thing I'm not able to do is to bind the dropdown to the Categories array AFTER it is initialized at run time. There's got to be a way to do this?

More experimentation - I redefined the column to call a function, rather than a direct assignment of the member variable.

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

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

I placed a breakppoint on the return statement. This function is called once, when the page loads and then it is never called thereafter. So obviously, the dynamically generated array isn't being bound to the dropdown after the data is fetched from the database. That's the crux of my issue. Any ideas on how to make this happen?

Thanks for your advice!

来源：https://stackoverflow.com/questions/58968799/how-do-i-bind-ag-grid-dropdown-to-array-of-strings-whose-values-are-not-known-un

标签

angular

ag-grid-angular