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

Question

当我尝试编辑单元格时，下拉菜单会打开，因为我在 Angular 8 应用程序内的 agGrid 中使用 agSelectCellEditor。但我无法将 "Yes" 映射到下拉编辑器中的选定值。

我想说我有一行单元格值为：-

当我编辑它时，默认选择 "No"。我想将下拉列表中的选定值设置为单元格值。目前它是这样的：-

我做错了什么？

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

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

How to map agSelectCellEditor values in agGrid to cell value

dropdown

angular

ag-grid-angular

angular8