agSelectCellEditor 在编辑单元格时返回对象

Question

我在 Angular8 中使用 agGrid。我有一列，当我想编辑时，应该在下拉列表中给我精确的映射值。我为此使用 agSelectCellEditor。这是代码：-

HTML

<ag-grid-angular class="ag-theme-balham" [gridOptions]="categoryGridOptions"
            [rowData]="categoryRowData" [columnDefs]="categoryColDef"  
            (gridReady)="onGridReady($event)">
        </ag-grid-angular>

TS 文件

export class CategoryComponent{
  categoryRowData: any[]; 
  objCategoryMappings = [{
        0: "No",
        1: "Yes",        
      }];

  categoryColDef = [
       {
            headerName: 'Category Name', field: 'CategoryName',                        
            cellEditor: 'agLargeTextCellEditor',
            cellEditorParams: {
                maxLength: '50',
                cols: '20',
                rows: '1'
            }
        },
        {
            headerName: 'Is Subcategory', field: 'IsSubcategory',              
            cellEditor: 'agSelectCellEditor',
            cellEditorParams: {
                values: this.extractValues(this.objCategoryMappings),                                
            },                                          
            cellRenderer: (params) => {               
                return this.mapCategory(params);
            }, 
            refData: this.objCategoryMappings,            
        }];

    extractValues(mappings) {
        return Object.keys(mappings);
    }

    mapCategory(objRowData : any) : string
    {
        if (objRowData.data.IsSubcategory == 1)
            return "Yes";
        else if (objRowData.data.IsSubcategory == 0)
            return "No";        
    }
}

当我点击单元格时，我会看到下拉菜单，如下图所示：-

我做错了什么？

Answer 1

看起来你的 objCategoryMappings 应该是

objCategoryMappings = {
   0: "No",
   1: "Yes",        
};

即删除方括号 - 使其成为一个数组。

此外，通过使用 Object.keys(objCategoryMappings) 作为值，您将在 select 中得到 0 和 1。如果您想要 'No' 和 'Yes'，请使用 Object.keys(mappings).map((key) => mappings[key]);

agSelectCellEditor 在编辑单元格时返回对象

agSelectCellEditor is returning object on editing the cell

typescript

angular

ag-grid-angular

angular8