如何在角网格中对数据库中的下拉值使用agSelectCellEditor
我在角8中使用refData和agSelectCellEditor来显示编辑时的下拉值。为解决我的问题，请参考以下链接：
https://www.ag-grid.com/javascript-grid-reference-data/
但是下拉列表数据是通过HTTP查询从数据库中获取的。我在agGrid中使用“extractValues”，其中包含方法"extractValues()“，如下所示。问题是，该方法在数据来自数据库之前运行，从而导致空白数据。如何解决这个问题？
理想情况下，下拉列表应该包含“是/否”的值。当我用静态列表在顶部声明"objCategoryMappings“时，它就正常工作了。像"refData“这样的限制不适用于数据库中的动态列表吗？如果是这样，那还有什么可供选择的呢？
请参考下面的代码。为了简单起见，我在订阅方法中静态地设置了“是/否”。在实际场景中，我将使用"objCategoryMappings“存储数据库中的值。
<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);
}
}回答 3
Stack Overflow用户
发布于 2019-12-13 12:55:29
为什么要在获取网格行数据之后构建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_ogoo所说：
<ag-grid-angular
*ngIf="categoryColDef"
class="ag-theme-balham"
[gridOptions]="categoryGridOptions"
[rowData]="categoryRowData"
[columnDefs]="categoryColDef"
(gridReady)="onGridReady($event)"
>
</ag-grid-angular>Stack Overflow用户
发布于 2019-12-13 10:54:10
您可以通过使用ag-grid指令来控制何时需要数据。
<ag-grid-angular
*ngIf="categoryRowData"
class="ag-theme-balham"
[gridOptions]="categoryGridOptions"
[rowData]="categoryRowData"
[columnDefs]="categoryColDef"
(gridReady)="onGridReady($event)"
>
</ag-grid-angular>这将延迟ag-grid组件的呈现，直到数据可用为止。
Stack Overflow用户
发布于 2021-01-05 13:51:49
另一个解决办法。与最佳答案不同，您不需要在接收到应用程序的数据时创建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')
.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}https://stackoverflow.com/questions/59315474
复制相似问题
腾讯云开发者
