Question

我正在尝试使用ngx-bootstrap编写一个预先输入。为了获取列表的值，它需要来自API的http.get。所以我添加了一个事件绑定到我的输入来触发http请求并更新typeahead的组件数组。

<input class="form-control"
    container="body"
    formControlName="prefix"
    typeaheadOptionField="name"
    [typeahead]="accounts"
    (typeaheadOnSelect)="onSelect($event)"
    (keyup)="getAccounts()">

然后在我的组件中，getAccounts（）方法在keyup上触发：

getAccounts() {
    this.users.accountTypeAhead(this.userForm.value.prefix).subscribe(
        response => {
            this.accounts = this.apiHandler.responseHandler(response);
            console.log(this.accounts);
        },
        (err) => {
            this.apiHandler.errorHandler(err);
        }
    );
}

这会调用服务来发出get请求：

accountTypeAhead(param, url = this.accountAutoComplete) {
    let params = new HttpParams();
    params = params.set('prefix', param);
    return this.http.get(url, {params: params});
}

这一切似乎都在部分运作。 keyup事件被触发，当我在控制台中观看时，我可以看到this.accounts更新了结果。

我遇到的挑战是，在我输入后，输出的预先输入显示为/。我在这里错过了什么吗？

Answer 1

我假设您在没有初始化的情况下在组件上声明帐户，就像：

exists()

现在，我猜MyComponent { accounts; // other code here // and getAccounts() method }第一次感到困惑，并假设您的帐户不是可观察的。因此，当您稍后更改对它的引用时，typeahead实例不会获得对该数组的新引用。尝试使用文档中的示例，并立即声明它是可观察的：

typeahead

Here是一个完整的例子。

来自http服务的ngx-bootstrap数据

1 个答案: