Reference to this is not accessible inside traditional function

Question

I am using Angular 9 for web development. I wanted to implement typeahead feature in my application. So I am using ng bootstrap typeahead. everything works perfectly as mentioned into below code.

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

but somehow this is not working into the IE browser as it does not have support for arrow functions. To resolve this probem i have modified code in below manner:

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([]);
          }))
      }
      ),
    )
  }

how do i customize this code to support IE browser.

Notice that the `const self = this` needs to go *outside* of the `function`. Also your second snippet is still using arrow functions, and has an additional `map()` call that's not there in your original code. — Bergi, Oct 08 '20 at 07:42

score 2 · Answer 1 · answered Oct 08 '20 at 07:43

2

Try defining let self = this before entering the function.

When using a function expression you you lose the scope of your code and your access to this - so you want to save your this before you enter your first function.

answered Oct 08 '20 at 07:43

ZimGil

877
4
12

not working for me – Swapnil Chidrawar Oct 08 '20 at 07:49
You still have some arrow functions in your second code snippet - at `switchMap()`, `map()` and `catchError()` – ZimGil Oct 08 '20 at 07:50
tried replacing switchMap also with traditional function declaration but still no success – Swapnil Chidrawar Oct 08 '20 at 07:58
It's unclear to me if you've replaced all arrow functions or just the `switchMap()` one. – ZimGil Oct 08 '20 at 08:04
I have tried replacing all arrow functions – Swapnil Chidrawar Oct 08 '20 at 08:19
Can you please post the current code and error you're getting? – ZimGil Oct 08 '20 at 08:19
`search = function (text$: Observable) { console.log(text$); let self = this; return text$.pipe( debounceTime(150), distinctUntilChanged(), switchMap(function (term) { return self.GameService.getCode(term).pipe( map(function (res) { this.isSearching = false; return res; }), ) } ), ) }` Error: `Property GameService` does not exist on type window & typeof globalThis – Swapnil Chidrawar Oct 08 '20 at 08:54

Reference to this is not accessible inside traditional function

1 Answers1