时间戳

首页 > 解决方案 > Ngbootstrap 错误尝试使用 angular 10 的 typeahead

angular - Ngbootstrap 错误尝试使用 angular 10 的 typeahead

问题描述

我的代码遇到问题。我想实现 ngbootstrap 的提前输入，但我在浏览时遇到了这个错误。

ERROR TypeError: Object(...)(...) is not a function
 at Observable.pipe (Observable.js:85)
 at NgbTypeahead.ngOnInit (ng-bootstrap.js:11786)
 at callHook (core.js:3038)   ..................

我正在研究 angular 10，我正在使用 ngbootstrap 8.0.2 版本

这是我组件中代码的平静

 this.airportService.getAirportsIfExist(airportName)
 .subscribe(result => {
    this.airportList = result;
      if(this.airportList.length==0){
        this.airportListSize = false;
      }
      else{
        this.airportListSize = true;
        this.searchVille = (text$: Observable<any>) =>
          text$.pipe(
            debounceTime(200),
            distinctUntilChanged(),
            map(term => term.length < 1 ? []
              : this.airportList.filter(v => v['name'].toLowerCase().startsWith(term.toLocaleLowerCase())).splice(0, 10))
          )
              }
});

在 html 文件中我得到了这个

    <input formControlName="villeDep" id="departureTown"  type="text" name="town" autocomplete="off" required [ngbTypeahead]="searchVille"/>

我现在不知道发生了什么，文档也没有提供足够的信息。

有人可以帮我pleeeeeaaaaasssssseeeeee 吗？？？

标签： angularobservableng-bootstrap

解决方案

你需要searchVille 总是定义（不是在订阅下）所以，当声明变量时检查也是！this.airportList（见评论）

//when you declare the variable
searchVille = (text$: Observable<any>) =>
      text$.pipe(
            debounceTime(200),
            distinctUntilChanged(),
            //see the condition now is "term.length<1 || !this.airportList"
            map(term => term.length<1 || !this.airportList ? []
              : this.airportList.filter(v => v['name'].toLowerCase().startsWith(term.toLocaleLowerCase())).splice(0, 10))
          )

推荐阅读