我们可以在进行内联编辑时延迟加载下拉数据吗？答案

【问题标题】：Can we lazy load data for dropdown while doing inline edit?我们可以在进行内联编辑时延迟加载下拉数据吗？
【发布时间】：2018-06-12 00:40:07
【问题描述】：

我正在使用 ag-grid 开发内联编辑功能。

根据官方文档：ag-Grid Cell Editing，我们可以提供下拉选项值，同时提供列定义colDef 本身。

colDef.cellEditor = 'selectCellEditor';
colDef.cellEditorParams = {
    values: ['English', 'Spanish', 'French', 'Portuguese', '(other)']
}

当这些值要从服务器获取时怎么办？即我们可以延迟加载然后为下拉列表提供cellEditorParams 值吗？（我没遇到过）

任何解决方案甚至方向都将不胜感激。

【问题讨论】：

标签： ag-grid javascript ag-grid ag-grid-ng2

【解决方案1】：

您可以创建以下拉列表为模板的自定义编辑器组件，并进行 HTTP 调用以加载下拉列表的数据。
即，在为列创建ColDef 时，

let column: ColDef = {
        headerName: 'Lookup', field: 'FieldName', coldId: 'Id'
        cellEditorFramework: DropdownEditorComponent,
        cellEditorParams: {} // whatever data you want to have in editor component
}

在编辑器组件中，

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { ICellEditorAngularComp } from 'ag-grid-angular';
import * as _ from 'underscore';
// import HttpService

@Component({
    template: `
    <select [(ngModel)]="selectedValue" (change)="selectionChanged()" #dropdown>
        <option *ngFor="let item of items" [ngValue]="item">{{item.label}}</option>
    </select>
    `
})

组件定义：

export class DropdownEditorComponent implements ICellEditorAngularComp, AfterViewInit {

    private params: any;
    private items: any[];
    private selectedValue: any;
    private selectControl: ElementRef;

    @ViewChild('dropdown') dropdown: ElementRef;

    constructor(private http: HttpService) {
        this.items = [];
    }        
    ngAfterViewInit() {
        this.selectControl = this.dropdown;
    }

    agInit(params: any): void {
        if(this.items.length == 0) {
            this.params = params;
            this.http.post(url, params)
            // this.http.get(url) // if the call is a GET
                .subscribe(result => {
                    this.items = result;
                    this.selectedValue = _.find(this.items, item => item.label == params.value);
                });
        }
    }

    getValue(): any {
        return this.selectedValue.label;
    }
    isPopup(): boolean {
        return false;
    }
    setValue(value: any): any {
        this.selectedValue = value;
    }
    selectionChanged(): void {
        // whatever you want to do
    }
}

【讨论】：

不应该get http方法吗？