3

カスタム フィルターを使用して ag-grid でテーブルを作成しました。検索フィールドに先行入力/オートコンプリート機能を追加したいと考えています。しかし、私はエラーが発生しています:

「input」の既知のプロパティではないため、「ngbTypeahead」にバインドできません。(" フィルタ: ][ngbTypeahead]="検索" (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]関数が必要です

4

1 に答える 1

0

次のように、 NgbTypeaheadModuleとNgbModuleをcreateColomnDefs()メソッドのModuleImportsにインポートします。

createColumnDefs()  {
    this.columnDefs =[
        { headerName: "Extern id", field: "externalRefId", width:150, colId:"workorder.externalRefId",
            filterFramework:{
            component: PartialMatchFilterComponent,
            moduleImports: [FormsModule, NgbModule, NgbTypeaheadModule ]
        }},
于 2016-11-29T15:41:20.907 に答える