angular8 - 在 ag 网格下拉列表中，如何在选择后显示名称并在保存集值而不是名称上显示。？

Question

使用这个 参考，我工作过 ag grid 下拉菜单。

问题：一旦我选择了一个下拉值，getvalue() 就会返回值而不是名称。因此它显示列上的数字，它应该是文本。

如果我将其更改为 name，则在保存时，它会绑定到 name 。但在这里它应该是有价值的。

必需：getValue 应返回名称并保存数组应包含值。

agInit(params: any): void {
    this.params = params;
    this.value = this.params.value;
    this.name = this.params.name;
    this.options = params.options;

}

getValue(): any {
    return this.value;
}

ngAfterViewInit() {
    window.setTimeout(() => {
        this.input.element.nativeElement.focus();
    })
}

stackbltiz 在 这里

我怎样才能做到这一点。

标签： angular8ag-gridag-grid-angular

Answer 1

您不必为它创建新cellRenderer的cellEditor，ag-grid 为其提供了内置select功能。**

当您objects在单个内部使用 (for dropdown\combobox) cell- 您必须实现值处理程序：valueParser和valueFormatter：

值解析器：在网格中编辑单元格后，您有机会在将值插入数据之前对其进行解析。这是使用值解析器完成的。

colDef.valueParser = (params) => {
    return this.lookupKey(mapping, params.newValue);
}

值格式化程序：值格式化程序允许您格式化值以进行显示。当数据是一种类型（例如数字）但需要转换以供人类阅读（例如输入货币符号和数字格式）时，这很有用。

colDef.valueFormatter = (params) => {
    return this.lookupValue(mapping, params.newValue);
}

* wheremapping代表您的对象，并且在每个函数中您只是提取键或值。

原始解决方案：

lookupValue(mappings, key) {
  return mappings[key];
}

lookupKey(mappings, name) {
    var keys = Object.keys(mappings);

    for (var i = 0; i < keys.length; i++) {
        var key = keys[i];

        if (mappings[key] === name) {
        return key;
        }
    }
}

在这里我做了一点修改：

lookupValue(mappings, key:string) {
    if(!mappings || !mappings.find(item => item.Id == key)) return null;
    else
        return mappings.find(item => item.Id == key).Value;
}

lookupKey(mappings, name) {
    let key: any;
    for (key in mappings) {
        if (mappings.hasOwnProperty(key)) {
            if (name === mappings[key]) {
                return key.Id;
            }
        }
    }
}

更新

要填充下拉列表，您需要使用cellEditorParams：

colDef.cellEditor = 'selectCellEditor';
colDef.cellEditorParams = {
    values: yourList,
},

**但是，如果需要，您仍然需要同时拥有渲染器和存储object，然后您就可以选择在每个阶段显示的内容。