The 'this' context of type 'void' is not assignable to method's 'this' of type 'Observable'

Question

I am getting this error in angular's autocomplete example. Here is the code:

ngOnInit() {
      this.filteredOptions = this.myControl.valueChanges
          .pipe(
            startWith(''),
            map(val => this.filter(val))
          );
}

The error is spawn on startWith. I am also getting an error in the second val. It says:

Argument of type '{}' is not assignable to parameter of type 'string'

The function is:

 filter(val: string): string[] {
    return this.options.filter(option =>
      option.toLowerCase().indexOf(val.toLowerCase()) === 0);
  }

HINT: There is something with mixed controls or imports. I am not sure but when I create a new component everything works fine.

Would you please show the full code for the function the error is in? — Narm, Mar 07 '18 at 15:05
Seems like myControl is not a control, it's a FormGroup? Because then valueChanges would emit objects instead of strings. — funkizer, Mar 07 '18 at 17:35

score 105 · Answer 1 · answered Mar 13 '18 at 14:35

105

I just had the same issue and it turns out I was importing map and startWith from the wrong directory.

import {map, startWith} from "rxjs/operators";

Use this to import both map and startWith and it should work and compile.

answered Mar 13 '18 at 14:35

user3605709

1,151
1
6
2

5

Same issue here -> import { delay } from 'rxjs/operator/delay'; instead of import { delay } from 'rxjs/operators/delay'; – Mac_W Sep 12 '18 at 08:28

score 0 · Answer 2 · answered Feb 01 '21 at 16:05

0

My case was that I loaded take(1) automatically by autopopulating from rxjs/compat/take but not from rxjs/operators, and catch this issue. Not so obvious thing :)

answered Feb 01 '21 at 16:05

Igor Kurkov

4,318
2
30
31

The 'this' context of type 'void' is not assignable to method's 'this' of type 'Observable'

2 Answers2