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

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();
        }
    }
}