ngBootstraps typeaheade results in Error: 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 确实 return 一个数组。如果我将 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 with observable。关于错误消息：问题在行中：让 result = await this.service.getSeries(term); 现在的结果是一个可观察的，所以你不能在它上面循环如果你想在不改变实现的情况下解决这个问题，只需等待 http 请求完成，然后在其中设置结果如果您使用的是可观察对象，则需要类似的东西 YOURREQUEST.subscribe(数据=>{让结果=数据}); 但实际上我不尝试 angular 承诺。我还建议您查看 ngbootstrap 演示页面上的示例 "Wikipedia search" https://ng-bootstrap.github.io/#/components/typeahead 我希望你能理解我，抱歉英语不好。

Answer 2

switchMap算子应该能帮到你。来自 Ng-bootstrap 示例：

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

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

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

asynchronous

typeahead

typescript

ng-bootstrap

angular