我使用自定义过滤器制作了一张带有 ag-grid 的表格。我想在搜索字段中添加预输入/自动完成功能。但我收到一个错误：
无法绑定到“ngbTypeahead”，因为它不是“输入”的已知属性。(" 过滤器: ][ngbTypeahead]="search" (ngModelChange)="onChange($event)" [ngModel]="text"> "): ProjectFilterComponent@2:8
我在自定义过滤器中使用外部库（ng-bootstrap）作为预输入。
@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)
}
}
[ngbTypeahead]在其他不使用 ag-grid 的搜索字段中工作正常。我需要ag-grid 的搜索字段中的[ngbTypeahead]函数