ngx-bootstrap 自定义预输入不起作用答案

【问题标题】：ngx-bootstrap Custom typeahead not workingngx-bootstrap 自定义预输入不起作用
【发布时间】：2017-10-11 15:22:32
【问题描述】：

我正在尝试创建一个自定义的 typeahead，每次用户输入内容时搜索我的 API 但它不起作用。它甚至没有进入autocomplete() 函数。我正在使用 Angular 4 CLI (1.4.2)、bootstrap 4 和 ngx-bootstrap (1.9.3)。我做错了什么？

组件.ts

public autoCompleteRef = this.autoComplete.bind(this);

public autoComplete() {
    let searchParams = new URLSearchParams();
    searchParams.set('search', this.autoCompleteSearchTerm);

    return this.http.get(this.api_url, {search: searchParams, headers: headers})
        .map(res => res.json())
        .map((el)=> {
            return el.map((data)=> {
                return ({id: data.id, name: data.name});
            });
        })
        .toPromise();
}

public typeaheadOnSelect(e): void {
    console.log('Selected value: ', e.value);
}

html

<input class="form-control"
       [(ngModel)]="autoCompleteSearchTerm"
       [typeahead]="autoCompleteRef"
       [typeaheadOptionField]="'name'"
       [typeaheadWaitMs]="300"
       [typeaheadMinLength]="1"
       (typeaheadOnSelect)="typeaheadOnSelect($event)">

【问题讨论】：

标签： twitter-bootstrap angular typescript ngx-bootstrap

【解决方案1】：

使用 (keyup) 调用该函数。这样就可以了。
并且每当用户键入一个字符时，它都会调用 API 并将结果存储在一个变量中，该变量将作为 [typeahead]="autoCompleteRef" 传递。

调用函数类似于：

<input class="form-control"
       [(ngModel)]="autoCompleteSearchTerm"
       [typeahead]="autoCompleteRef"
       [typeaheadOptionField]="'name'"
       [typeaheadWaitMs]="300"
       [typeaheadMinLength]="1"
       (keyup)="typeaheadOnSelect($event)">

【讨论】：