如何使用agSelectCellEditor处理来自Angular Grid中数据库的下拉值

Question

我正在Angular 8中使用refData和agSelectCellEditor在编辑时显示下拉值。我指的是以下链接来解决我的问题：-

https://www.ag-grid.com/javascript-grid-reference-data/

但是下拉列表数据是通过HTTP GET查询来自数据库的。我正在agGrid中使用“ cellEditorParams”，其中包含方法“ extractValues（）”，如下所示。问题在于该方法在数据来自数据库之前运行，并导致生成空白数据。该如何解决？

理想情况下，下拉列表中的值应为“是/否”。当我在静态列表的顶部声明“ objCategoryMappings”时，它工作正常。是否有类似“ refData”的限制不适用于数据库中的动态列表？如果是这样，那有什么选择？

请参考下面的代码。为简单起见，我在subscribe方法中静态设置了“是/否”。在实际情况下，我将使用“ objCategoryMappings”来存储数据库中的值。

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 = {};

  constructor() {
        this.getAllCategories();                  
  } 

  getAllCategories()
    {            
        this.categoryCommonService.getEntityData('getallcatgories')
            .subscribe((rowData) => {                 
                this.categoryRowData = rowData;               
                this.objCategoryMappings["f"] = "No";
                this.objCategoryMappings["t"] = "Yes";                
            },
                (error) => { alert(error) });       
    }          

  categoryColDef = [
       {
            headerName: 'Category Name', field: 'CategoryName',                        
            cellEditor: 'agLargeTextCellEditor',
            cellEditorParams: {
                maxLength: '50',
                cols: '20',
                rows: '1'
            }
        },
        {
            headerName: 'Is Subcategory', field: 'IsSubcategory', //Values coming from db as "f" and "t"             
            cellEditor: 'agSelectCellEditor',
            cellEditorParams: {
                values: this.extractValues(this.objCategoryMappings),                                
            },                                                      
            refData: this.objCategoryMappings,            
        }];

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

}

Answer 1

您可以使用ag-grid指令控制ngIf何时需要数据。

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

这将延迟ag-grid组件的渲染，直到数据可用为止>>