Question

我尝试创建一个自定义输出，每次用户输入内容时都会搜索我的API，但不能正常工作。它甚至没有进入autocomplete()功能。我使用的是Angular 4 CLI（1.4.2），bootstrap 4和ngx-bootstrap（1.9.3）。我做错了什么？

component.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)">

Answer 1

用（keyup）调用该函数。那就行了。
每当用户键入一个字符时，它就会调用API并将结果存储在一个变量中，该变量将作为[typeahead]="autoCompleteRef"传递。

调用函数：

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

ngx-bootstrap自定义预先不起作用

1 个答案: