CategoryComponent.html:57 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'Samsung'. NgFor only supports binding to Iterables such as Arrays. I can only display the product array rest it is not working with this code
This is the error I am getting in the console
<mat-accordion multi="true" *ngFor="let item1 of products">
<mat-expansion-panel *ngFor="let item2 of item1.childcat">
<mat-expansion-panel-header *ngFor="let item3 of item2.subcat">
{{item2.name}}{{ item3.name}}
</mat-expansion-panel-header>
<p>HAlo</p>
</mat-expansion-panel>
</mat-accordion> <!-- filter-group .// -->
My Component
this.route.queryParams.subscribe(params => {
this.categoryService.getProduct().subscribe(products => this.products = products)
Service file
getProduct(): Observable<Product[]>{
let params_url = new HttpParams().set('fil_outlet',this.name);
console.log('new my ss--',this.name);
return this.http.get<Product[]>("http://localhost:4500/products",{params:params_url});
};
JSON
[
{
"id": 1,
"name": "A7",
"childcatId": "1",
"subcatId": "1",
"price": 18000,
"mrp": 21000,
"discription": "sfhshsfhsf",
"image": "http://bestjquery.com/tutorial/product-grid/demo3/images/img-7.jpeg",
"createdAt": "2019-11-13T00:00:00.000Z",
"updatedAt": "2019-11-14T02:00:00.000Z",
"childcat": {
"id": 1,
"name": "samsung",
"categoryId": "1",
"subcatId": "1",
"createdAt": "2019-11-21T00:00:00.000Z",
"updatedAt": "2019-11-21T00:00:00.000Z",
"subcat": {
"id": 1,
"name": "Mobile",
"categoryId": "1",
"createdAt": "2019-11-19T00:00:00.000Z",
"updatedAt": "2019-11-05T00:00:00.000Z",
"filter_groups": [
{
"id": 1,
"name": "Ram",
"subcatId": "1",
"createdAt": "2019-11-13T00:00:00.000Z",
"updatedAt": "2019-11-13T00:00:00.000Z",
"filters": [
{
"id": 1,
"name": "2 GB",
"filterGroupId": "1",
"productId": "1",
"createdAt": "2019-11-19T00:00:00.000Z",
"updatedAt": "2019-11-27T00:00:00.000Z"
}
]
},
{
"id": 2,
"name": "Internal Storage",
"subcatId": "1",
"createdAt": "2019-11-05T00:00:00.000Z",
"updatedAt": "2019-11-24T00:00:00.000Z",
"filters": [
{
"id": 2,
"name": "8 GB",
"filterGroupId": "2",
"productId": "1",
"createdAt": "2019-11-20T00:00:00.000Z",
"updatedAt": "2019-11-20T00:00:00.000Z"
}
]
}
]
}
}
}
]
You are attempting to call an *ngFor on objects, not arrays. What you do instead is simply call the items themselves. See the following code.
<mat-accordion multi="true">
<mat-expansion-panel *ngFor="let item1 of products">
<mat-expansion-panel-header>
{{item1.childcat.name}}{{ item1.childcat.subcat.name}}
</mat-expansion-panel-header>
<p>HAlo</p>
</mat-expansion-panel>
</mat-accordion> <!-- filter-group .// -->
If you have the potential to have a null childcat, then you can modify the code slightly with an ngIf.
<mat-accordion multi="true">
<mat-expansion-panel *ngFor="let item1 of arrObject">
<mat-expansion-panel-header>
<p *ngIf="item1.childcat">{{item1.childcat.name}}{{ item1.childcat.subcat.name}}</p>
</mat-expansion-panel-header>
<p>HAlo</p>
</mat-expansion-panel>
</mat-accordion> <!-- filter-group .// -->
You don't necessarily have to use a p tag for this but just some sort of wrapper that uses the if. Keep in mind that if the subcat within your childcat has the potential to be null you will have to do a check for that as well. (Not shown)
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加