angular - ngBootstraps typeahade 导致错误 : Cannot find a differ supporting object '[object Promise]' of type 'object'

Question

我在使用带有异步 http 请求的 ngBootstraps typeahead 时遇到了问题。

我得到的是

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

每次我开始在输入中输入一个值时，我都会收到以下错误。

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)

据我所知，错误消息 ngFor needs an Array to work。我对该错误消息的问题是，searchSeries 确实返回了一个数组。如果我将 searchSeries 更改为

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

我可以看到结果包含一个数组。但为什么我会收到此错误消息？

提前致谢!

Answer 1

首先，我更喜欢您将 RXJS 与 observable 一起使用。关于错误消息:问题在行中:让 result = await this.service.getSeries(term);现在的结果是一个可观察的，所以你不能在它上面循环如果你想在不改变实现的情况下解决这个问题，只需等待 http 请求完成，然后在其中设置结果如果您使用的是可观察对象，则需要类似的东西YOURREQUEST.subscribe(data=>{let result = data});但实际上我不尝试 angular 与 promise 。我还建议您在 ngbootstrap 演示页面“维基百科搜索”上查看示例 https://ng-bootstrap.github.io/#/components/typeahead我希望你能理解我，抱歉英语不好。