ngBootstraps typeaheade results in Error: Cannot find a differ supporting object '[object Promise]' of type 'object'

user_4243929 0
Viewed 1073

I've got a problem using ngBootstraps typeahead with async http requests.

What I've got is

example.html

<input id="typeahead-basic" type="text" class="form-control" value="{{issue.Series.Title}}" (selectItem)="selectSeries($event)" [ngbTypeahead]="searchSeries" [resultFormatter]="seriesFormatter"/>

example.ts

searchSeries = (text$: Observable<string>) =>
        text$
            .debounceTime(100)
            .distinctUntilChanged()
            .map(async term => {
                return await this.service.getSeries(term);
            });

example.servics.ts

  async getSeries(term: string): Promise<Series[]> {
    let series: Series = new Series();
    series.Title = term;

    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    let options = new RequestOptions({headers: headers});

    return await this.http.post(this.urlSeries, JSON.stringify(series), options)
        .map(res => res.json() || {})
        .catch(res => Observable.throw("error"))
        .toPromise();
  }

Everytime I start typing a value into the input I get the following error.

NgbTypeaheadWindow.html:5 ERROR Error: Cannot find a differ supporting object '[object Promise]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.webpackJsonp.../../../common/@angular/common.es5.js.NgForOf.ngOnChanges (common.es5.js:1659)
    at checkAndUpdateDirectiveInline (core.es5.js:10891)
    at checkAndUpdateNodeInline (core.es5.js:12382)
    at checkAndUpdateNode (core.es5.js:12321)
    at debugCheckAndUpdateNode (core.es5.js:13180)
    at debugCheckDirectivesFn (core.es5.js:13121)
    at Object.eval [as updateDirectives] (NgbTypeaheadWindow.html:5)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13106)
    at checkAndUpdateView (core.es5.js:12288)
    at callViewAction (core.es5.js:12651)

As far as I understand the error message ngFor needs an Array to work. My problem with that error message is, that searchSeries does return an array. If I change searchSeries to

searchSeries = (text$: Observable<string>) =>
        text$
            .debounceTime(100)
            .distinctUntilChanged()
            .map(async term => {
                let result = await this.service.getSeries(term);
                console.log(result);
                return result;
            });

I can see that result holds an array. But why do I get this error message?

Thanks in advance!

typeahead ng-bootstrap angular typescript asynchronous
2 Answers

The switchMap operator should be able to help you here. From the Ng-bootstrap example: 

search = (text$: Observable<string>) =>
    text$
      .debounceTime(300)
      .distinctUntilChanged()
      .do(() => this.searching = true)
      .switchMap(term =>
        this._service.search(term)
          .do(() => this.searchFailed = false)
          .catch(() => {
            this.searchFailed = true;
            return Observable.of([]);
          }))
      .do(() => this.searching = false)
      .merge(this.hideSearchingWhenUnsubscribed);
user_37451150
Related