使用 angual4 的 ag-grid 列标题中的 dropDown HTML

Question

如何使用 Angular 在 ag-Grid 中嵌入列标题下拉菜单？

如果我有一个带有“类型”列的员工网格。员工类型有两个选项：永久和合同。我需要列标题中的下拉菜单。

Answer 1

您需要为此实现自定义过滤器组件。

看看这个活生生的例子：Plunk ag-grid custom filter component

检查 Plunk 中的EmployeeType 列。

1. 实施IFilterAngularComp
2. 为此实现所需的方法。即getModel、setModel、doesFilterPass、isFilterActive等
3. 将此组件提供为列定义的过滤器组件。

下面是过滤器组件的代码

@Component({
    selector: 'filter-cell',
    template: `
        <div class="container">
            EmployeeType Filter: 
            <select (ngModelChange)="onChange($event)" [ngModel]="type" class="form-control">
              <option value=""></option>
              <option value="Permanent">Permanent</option>
              <option value="Contractor">Contractor</option>
            </select>
        </div>`
    , styles: [.....]
})
export class RecordTypeFilter implements IFilterAngularComp {
    private params: IFilterParams;
    private valueGetter: (rowNode: RowNode) => any;

    @ViewChild('select', {read: ViewContainerRef}) public select;

    agInit(params: IFilterParams): void {
        this.params = params;
        this.valueGetter = params.valueGetter;
    }

    isFilterActive(): boolean {
        return this.type !== null && this.type !== undefined && this.type !== '';
    }

    doesFilterPass(params: IDoesFilterPassParams): boolean {
        return this.type.toLowerCase()
            .split(" ")
            .every((filterWord) => {
                return this.valueGetter(params.node).toString().toLowerCase().indexOf(filterWord) >= 0;
            });
    }

    getModel(): any {
        return {value: this.text};
    }

    setModel(model: any): void {
        this.type = model ? model.value : '';
    }

    ngAfterViewInit(params: IAfterGuiAttachedParams): void {
        setTimeout(() => {
            //this.select.element.nativeElement.focus();
        })
    }

    // noinspection JSMethodCanBeStatic
    componentMethod(message: string): void {
        alert(`Alert from RecordTypeFilterComponent ${message}`);
    }

    onChange(newValue): void {
        if (this.type !== newValue) {
            this.type = newValue;
            this.params.filterChangedCallback();
        }
    }
}