使用Angular 2使用ag栅格进行打字

使用Angular 2使用ag栅格进行打字,angular,autocomplete,typeahead,ag-grid,ng-bootstrap,Angular,Autocomplete,Typeahead,Ag Grid,Ng Bootstrap,我用ag网格制作了一张使用自定义过滤器的表格。我想在搜索字段中添加typeahead/autocomplete功能。但我有一个错误: 无法绑定到“ngbTypeahead”,因为它不是“input”的已知属性。(" 筛选器:[ngbTypeahead]=“搜索” (ngModelChange)=“onChange($event)” [ngModel]=“文本”> "): ProjectFilterComponent@2:8 我在自定义过滤器中为typeahead使用外部库(ng引导) @Comp

我用ag网格制作了一张使用自定义过滤器的表格。我想在搜索字段中添加typeahead/autocomplete功能。但我有一个错误:

无法绑定到“ngbTypeahead”,因为它不是“input”的已知属性。(" 筛选器:[ngbTypeahead]=“搜索” (ngModelChange)=“onChange($event)” [ngModel]=“文本”> "): ProjectFilterComponent@2:8

我在自定义过滤器中为typeahead使用外部库(ng引导)

@Component({
selector: 'filter-cell',
template: `
    Filter: <input style="height: 20px"
    [ngbTypeahead]="search"
    (ngModelChange)="onChange($event)"
    [ngModel]="text">
`

})

class ProjectFilterComponent implements AgFilterComponent{
public params:IFilterParams;
public valueGetter:(rowNode:RowNode) => any;
public text;
allTextFromProject = this.order.projects

constructor(private order : WorkorderComponent){


}

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




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


}

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

doesFilterPass(params:IDoesFilterPassParams):boolean {
    return this.text.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.text = model.value;
}

afterGuiAttached(params:IAfterFilterGuiAttachedParams):void {

    this.input.element.nativeElement.focus();
}

search = (text$: Observable<string>) =>{
    text$
        .debounceTime(200)
        .distinctUntilChanged()
        .map(term => term.length < 1 ? []
            : this.order.projects.filter(v => new RegExp(term, 'gi').test(v)).splice(0, 10));


onChange(newValue):void {
    if (this.text !== newValue) {
        console.log(newValue)

        this.text = newValue;
        this.order.filterFunction(newValue, this.params.colDef.colId, this.order.page)



    }
}
@组件({
选择器:'过滤单元',
模板:`
过滤器:
`
})
类ProjectFilterComponent实现AgFilterComponent{
公共参数:IFilterParams;
公共估价师:(rowNode:rowNode)=>任意;
公共文本;
allTextFromProject=this.order.projects
构造函数(私人订单:WorkorderComponent){
}
@ViewChild('projectinput',{read:ViewContainerRef})公共输入;
agInit(参数:IFilterParams):无效{
this.params=params;
this.valueGetter=params.valueGetter;
}
isFilterActive():布尔值{
返回this.text!==null&&this.text!==undefined&&this.text!='';
}
doesFilterPass(参数:IDoesFilterPassParams):布尔值{
返回此.text.toLowerCase()
.拆分(“”)
.每((过滤字)=>{
返回此.valueGetter(params.node).toString().toLowerCase().indexOf(filterWord)>=0;
});
}
getModel():任何{
返回{value:this.text};
}
setModel(型号:任意):无效{
this.text=model.value;
}
afterGuiAttached(参数:IAAfterFilterGuiAttachedParams):无效{
this.input.element.nativeElement.focus();
}
搜索=(文本$:可观察)=>{
正文$
.debounceTime(200)
.distinctUntilChanged()
.map(term=>term.length<1?[]
:this.order.projects.filter(v=>newregexp(术语'gi').test(v)).splice(0,10));
onChange(newValue):void{
if(this.text!==newValue){
console.log(newValue)
this.text=newValue;
this.order.filterFunction(newValue、this.params.colDef.colId、this.order.page)
}
}

[ngbTypeahead]在其他不使用ag grid的搜索字段中工作正常。我需要在ag grid的搜索字段中使用[ngbTypeahead]函数

NgbTypeaheadModuleNgbModule导入CreateColomDefs()方法中的ModuleImports,如下所示:

createColumnDefs()  {
    this.columnDefs =[
        { headerName: "Extern id", field: "externalRefId", width:150, colId:"workorder.externalRefId",
            filterFramework:{
            component: PartialMatchFilterComponent,
            moduleImports: [FormsModule, NgbModule, NgbTypeaheadModule ]
        }},