Type 'Observable<any>' is not assignable to type '[]'
productList
should be Product[]
not Observable<any>
. So assign productList
value from getProducts
subscribe method, where you will retrieve array of Product
onSelect(typeid) {
this.productService.getProducts()
.pipe(
filter((item)=>item.ptypeid == typeid)
)
.subscribe((products) => {
this.productList = products;
});
}
Change your method getProducts method to
getProducts() : Observable<any> {
// ...using get request
let response = this.http.get(this.productURL)
// ...and calling .json() on the response to return data
.map((response: Response) => response.json());
return response;
}
A couple of problems, first I noticed you are using a relative url for your get-request. That is not going to work. You need to have the correct url, meaning something that starts with http://..
even if your api is on localhost you need to provide the complete url.
Secondly, the get request is okay, but your call in your component should look like this:
this.productService.getProducts()
.subscribe(data => {
this.productList = data})
Since you are doing a map in your request, you also need to subscribe to that, otherwise you won't get any results!
Worth mentioning is also, since this is an async operation, you might want to include a ngIf
in your table, so that your app won't throw an error in case view is rendered before data has arrived, so just do this:
<table *ngIf="productList">
This should clear things up!
Alternatively, if you do not want to subscribe, you can do as you previously did:
this.products = this.productService.getProductTypeList();
but then you have to use the async
pipe in the view:
<tr *ngFor="let item of productList | async">
In this case the async-pipe does the subscription for you :)