Typescript 如何使用agSelectCellEditor在角度网格中显示来自数据库的下拉值

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

但下拉列表数据是通过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>

---

您可以使用

ngIf

指令控制

ag grid

何时需要数据

---

这将延迟

ag grid

组件的渲染，直到数据可用为止

为什么在获取网格行数据后要构建objCategoryMappings对象？在我看来，它是静态的，您不需要api响应来构建它

如果要保留此逻辑，则即使列定义也应在api响应之后执行，因为它需要在定义时当前未定义的objCategoryMappings数据：

export class CategoryComponent{
  categoryRowData: any[]; 
  objCategoryMappings = {};
  categoryColDef ;

  constructor() {
        this.getAllCategories();                  
  } 

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

createColumnsDefinition(){
     this.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,            
        }];

...
}

在html中，您需要等待数据接收，然后才能将网格呈现为c_ogo所述：

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

---

另一种解决方案。与最佳答案不同，当数据接收到应用程序时，不需要创建categoryColDef。您可以更早地创建它，并且只对objCategoryMappings进行更改。此实现所做的是在应用程序从数据库或其他地方接收到新数据时，从objCategoryMappings中删除现有元素。当然，也可以使用push（）方法添加新数据，但问题是每当应用程序收到新数据时，数组中的旧元素都不会被删除；因此，新数据被添加到已经有旧数据的数组中。我曾在Firebase中体验过这一点。我认为这个解决方案使代码管理变得容易

objCategoryMappings = [];

this.categoryCommonService.getEntityData('getallcatgories')
            .subscribe((rowData) => {                 
                this.objCategoryMappings.length = 0;           
                this.objCategoryMappings.push(...rowData);             
            });
            
          
 cellEditor: 'agSelectCellEditor', cellEditorParams: { values: objCategoryMappings}

---

另一个解决方案。在此解决方案中，它假定rowData和objCategoryMappings的数据都位于同一位置，因此可以比较相同位置的元素以查看是否有任何新的更改。如果存在，则在objCategoryMappings中进行更改，而不是替换所有值。这是一个非常有效的解决方案。（与第一个解决方案不同，我没有测试此解决方案）

objCategoryMappings=[]；
this.categoryCommonService.getEntityData（'getallcatgories'））
.订阅（（行数据）=>{
这个。分配（行数据）；
});
函数分配（行数据）{
对于（var i=0；iYou真是太棒了Z。您在数据库调用之后调用列定义的想法对我来说非常有吸引力。非常感谢。谢谢您的回复。如果我在数据库调用之后调用列定义，那么它对我来说就行了。在这种情况下，不需要*ngIf。但也感谢您的建议。
objCategoryMappings = [];

this.categoryCommonService.getEntityData('getallcatgories')
            .subscribe((rowData) => {                 
                this.objCategoryMappings.length = 0;           
                this.objCategoryMappings.push(...rowData);             
            });
            
          
 cellEditor: 'agSelectCellEditor', cellEditorParams: { values: objCategoryMappings}

objCategoryMappings = [];

this.categoryCommonService.getEntityData('getallcatgories')
  .subscribe((rowData) => {
    this.assign(rowData);           
});


function assign(rowData){
    for(var i=0; i<rowData.length; i++) {
     if (rowData[i] != objCategoryMappings[i]) {
        objCategoryMappings[i] = rowData[i];
     }
  }
}


cellEditor: 'agSelectCellEditor', cellEditorParams: { values: objCategoryMappings}