Question

我正在尝试使用ng-bootstrap的typeahead指令。我有以下HTML代码段：

<input type="text" class="form-control" formControlName="payee" autofocus [ngbTypeahead]="searchPayee">

在组件中带有以下属性，就像ng-bootstrap官方文档中的the first example一样：

searchPayee = (text$: Observable<string>) => {
    text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      map(term => term.length < 2 ? []
        : ['aaa', 'bbbb'].filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10)));
  }

但是，在执行时，出现以下错误。有什么想法我在这里想念的吗？

TransactionModalComponent.html:50 ERROR TypeError: Cannot read property 'pipe' of undefined
    at NgbTypeahead.ngOnInit (ng-bootstrap.js:10414)
    at checkAndUpdateDirectiveInline (core.js:31909)
    at checkAndUpdateNodeInline (core.js:44366)
    at checkAndUpdateNode (core.js:44305)
    at debugCheckAndUpdateNode (core.js:45327)
    at debugCheckDirectivesFn (core.js:45270)
    at Object.eval [as updateDirectives] (MyComponent.html:50)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:45258)
    at checkAndUpdateView (core.js:44270)
    at callViewAction (core.js:44636)

Answer 1

在他们的示例中，返回text$.pipe是因为他们没有使用block语句（大括号）。

在您的示例中，表达式使用的是语句块（大括号），因此必须显式使用return text$.pipe才能返回。

示例：

searchPayee = (text$: Observable<string>) => {
    return text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      map(term => term.length < 2 ? []
        : ['aaa', 'bbbb'].filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10)));
  }

，或者不带障碍（例如ngb示例）：

search = (text$: Observable<string>) =>
    text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      map(term => term.length < 2 ? []
        : states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))
    )

基本上，箭头函数的工作方式如下：

// returns val
const foo = (val) => val;

// returns val
const bar = (val) => {
  return val;
}

// returns nothing
const baz = (val) => {
  val;
}

Answer 2

我不确定为什么，这不应该发生。您可以随时尝试添加NgModel，但我建议您执行以下操作以确保不会发生：

searchPayee = (text$: Observable<string>) => {
   if(text$ === null || text$ === undefined) return;
   text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      map(term => term.length < 2 ? []
      : ['aaa', 'bbbb'].filter(v => 
            v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10)));
    }

Answer 3

这不是上面的答案，但是Google搜索将您带到这里，以防万一有人来这里寻求帮助...

就我而言，我有一个不需要的括号集。在下面的示例中，在“搜索”之后。

来自 <input [(ngModel)]="searchText" type="text" [ngbTypeahead]="search()" class="form-control form-control-sm" placeholder="Search..." />

至 <input [(ngModel)]="searchText" type="text" [ngbTypeahead]="search" class="form-control form-control-sm" placeholder="Search..." />

无法读取NgbTypeahead中未定义的属性“ pipe”

3 个答案: