Angular: RxJs switchMap producing error

Question

I am modeling my use of switchMap exactly as shown in the Angular documentation:

Angular doc implementation:

ngOnInit() {
  this.hero$ = this.route.paramMap
    .switchMap((params: ParamMap) =>
      this.service.getHero(params.get('id')));

}

My implementation:

ngOnInit() {
    let product$ = this.route.paramMap
     .switchMap((params: ParamMap) =>
     this.getProduct(params.get('id')));

}

My switchmap implementation produces the following error in the editor: (not a runtime error)

[ts]
Argument of type '(params: ParamMap) => void' is not assignable to parameter 
of type '(value: ParamMap, index: number) => ObservableInput<{}>'.
  Type 'void' is not assignable to type 'ObservableInput<{}>'.

This is my getProduct() method:

private getProduct(id:string) {
this.dataService.getProduct(id).subscribe(product => {
  this.product = product;
  this.currentImage = product.image[0];
  console.log('product = ', this.product)
  return of(product);
})

}

SEY_91 · Accepted Answer · 2018-04-02 23:47:39Z

8

Your method type is void because you are not returning any value. Then you have to change it like this.

private getProduct(id:string) {
this.dataService.getProduct(id).subscribe(product => {
  this.product = product;
  this.currentImage = product.image[0];
  console.log('product = ', this.product);
});
return of(this.product);
}

It would be more readable if you refactor your code like this.

 product$: Observable<any>;
 ngOnInit() {
  this.product$ = this.route.paramMap
  .switchMap((params: ParamMap) =>
  this.getProduct(params.get('id')));
  this.product$.subscribe(product => {
  this.currentImage = product.image[0];
});
}
private getProduct(id:string) {
return this.dataService.getProduct(id);
}

edited Apr 2, 2018 at 23:47

answered Apr 2, 2018 at 23:37

SEY_91

1,69718 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jb Randria · Accepted Answer · 2019-05-08 10:07:05Z

2

ngOnInit() {
this.route.paramMap.pipe(
  switchMap((params: ParamMap) => {
    return this.palmaresService.getPalmaresForAnUser(params.get('id'));
  })
).subscribe(
  result => {
    this.userDetails = result as any;
  },
  error => {
    console.log('Error on fetching data: ', error);
  }
);}

answered May 8, 2019 at 10:07

Jb Randria

1111 silver badge4 bronze badges

Collectives™ on Stack Overflow

Angular: RxJs switchMap producing error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related