在传统功能中无法访问对此的引用[重复]

Question

我正在使用 Angular 9 进行 Web 开发。我想在我的应用程序中实现 typeahead 功能。所以我正在使用 ng bootstrap typeahead。一切正常，如下面的代码所述。

search = (text$: Observable<string>) =>
    text$.pipe(
      debounceTime(150),
      distinctUntilChanged(),
      switchMap(term =>
        this.GameService.getCode(term).pipe(
          catchError(() => {
            return of([]);
          }))
      ),
    )

但不知何故，这不适用于 IE 浏览器，因为它不支持箭头功能。为了解决这个问题，我用以下方式修改了代码：

search = function(text$: Observable<string>) {
    return text$.pipe(
      debounceTime(150),
      distinctUntilChanged(),
      switchMap(term => {
        let self = this;  // this is undefined and hence self is also undefined
        return self.GameService.getCode(term).pipe(
          map((res) => {
            this.isSearching = false;
            return res;
          }),
          catchError(() => {
            return of([]);
          }))
      }
      ),
    )
  }

如何自定义此代码以支持 IE 浏览器。

Answer 1

在输入function 之前尝试定义let self = this。

使用函数表达式时，您将失去代码的范围和对 this 的访问权限 - 因此您希望在输入第一个 function 之前保存您的 this。