When I try to run the ngOnInit method of my component, I encountered an error with the following line of code.
this.products$ = this.route.paramMap.switchMap((params: ParamMap) =>
this.getProductsForType(params.get('type')));
The error message reads as follows:
BrandComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: this.route.paramMap.switchMap is not a function
at BrandComponent.ngOnInit (brand.component.ts:22)
at checkAndUpdateDirectiveInline (core.js:12369)
at checkAndUpdateNodeInline (core.js:13893)
at checkAndUpdateNode (core.js:13836)
at debugCheckAndUpdateNode (core.js:14729)
at debugCheckDirectivesFn (core.js:14670)
at Object.eval [as updateDirectives] (BrandComponent_Host.ngfactory.js? [sm]:1)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14655)
at checkAndUpdateView (core.js:13802)
at callViewAction (core.js:14153)
This is how the component is structured:
export class BrandComponent implements OnInit {
private products:Product[];
private products$: Observable<Product[]>;
constructor(private route:ActivatedRoute,
private brandService: BrandService) { }
ngOnInit() {
this.products$ = this.route.paramMap.switchMap((params: ParamMap) =>
this.getProductsForType(params.get('type')));
}
private getProductsForType(type) {
console.log('BrandComponent.getProductsForType() called')
return this.brandService.getProductsForType(type);
}
}
Currently, the BrandService.getProductsForType() method is returning an empty array:
@Injectable()
export class BrandService {
private productsUrl:string = '/api/products/all';
private products:Product[];
constructor(private http:HttpClient,
private dataService:DataService) { }
public getProductsForType(type:string) : Observable<Product[]> {
console.log('BrandService.getProductsForType() called')
// return this.dataService.getProductsForType(type);
return of([])
}
}