如何将agGrid中的agSelectCellEditor值映射到单元格值

Question

当我尝试编辑单元格时，会打开下拉列表，因为我在Angular 8应用程序内的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

您需要先对IsSubcategory字段进行字符串化处理，然后再将其传递给网格：

this.categoryRowData.forEach(r => r.IsSubcategory += '') ;

IsSubcategory列定义不再需要cellRenderer：

export class CategoryComponent{
  categoryRowData: any[]; // need to loop through rows and convert IsSubcategory to string.
  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),                                
            } 
            refData: this.objCategoryMappings,            
        }];

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