данные ngx-bootstrap из http-сервиса

Я пытаюсь написать заголовок с помощью ngx-bootstrap. Чтобы получить значения для списка, требуется http.get из API. Поэтому я добавил привязку события к моему входу, чтобы инициировать HTTP-запрос и обновить массив компонентов для опережающего ввода.

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

затем в моем компоненте метод getAccounts() запускается при нажатии клавиши:

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);
        }
    );
}

это вызывает службу, чтобы сделать запрос на получение:

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

все это, кажется, частично работает. Событие keyup запускается, и когда я смотрю в консоли, я вижу, что this.accounts обновляется с результатами.

Проблема, с которой я сталкиваюсь, заключается в том, что раскрывающийся список ввода не отображается, когда я печатаю/после того, как я печатаю. Я что-то упустил здесь?


angular ngx-bootstrap
person Sandra Willford    schedule 13.03.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я предполагаю, что вы объявляете учетные записи в компоненте без инициализации, например:

MyComponent {
    accounts;
    // other code here
    // and getAccounts() method
}

Теперь, я думаю, typeahead в первый раз запутался и предполагает, что ваши счета не являются наблюдаемыми. Поэтому, когда вы позже измените ссылку на него, экземпляр typeahead не получит эту новую ссылку на ваш массив. Попробуйте, как пример в документации, сразу же объявить его наблюдаемым:

ngOnInit() {
  this.dataSource = Observable.create((observer: any) => {
    // Runs on every search
    observer.next(this.asyncSelected);
  }).mergeMap((token: string) => this.filterResults(token));
}

// fired every time search string is changed
filterResults(token: string) {
  // adjust the remote url.
  const url = `${this.url}?searchTerm=token`;
  return this.http.get(url)
    // if your backend does the filtering, just return the results.
    // oterwise we have to massage them a bit
    .map((results: any[]) => results.filter(res => res.name.toLowerCase().indexOf(token.toLowerCase()) > -1));
}

Здесь полный рабочий пример этого.

person Zlatko    schedule 14.03.2018
comment
Я думаю, что приближаюсь к этому, теперь я получаю results.filter is not a function - person Sandra Willford; 14.03.2018
comment
Это хорошо, вероятно, просто означает, что ваш элемент результатов не является массивом или даже не является правильным json. Что вы видите на вкладке сети с этой конечной точки? - person Zlatko; 15.03.2018