Christian Riese Christian Riese - 3 months ago 17
TypeScript Question

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

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!

Answer Source

First of all i prefer you to use the RXJS with observable. About the error message : the problem is in the line : let result = await this.service.getSeries(term); the result now is an observable so you can not loop on it if you are trying to fix this without changing the implementation ,simply just wait the http request to finish then set the result inside it if you are using the observables you need something like YOURREQUEST.subscribe(data=>{let result = data}); but actually i do not try angular with promises. also i suggest you to see the example on the ngbootstrap demo page "Wikipedia search" https://ng-bootstrap.github.io/#/components/typeahead i hope you understands me and sorry for bad English.