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

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

我不确定为什么，这不应该发生。你总是可以尝试添加一个 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 2

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

在您的示例中，表达式使用块语句（花括号），因此您必须显式使用 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 3

这不是上述问题的答案，但 google 搜索会将您带到这里，以防其他人来这里寻求帮助...

在我的例子中，我有一个不需要的括号集。在下面的示例中 'search' 之后。

来自 <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'

Cannot read property 'pipe' of undefined in NgbTypeahead

rxjs

ng-bootstrap

angular

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

Cannot read property 'pipe' of undefined in NgbTypeahead

rxjs

ng-bootstrap

angular

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