Mam problem z wyświetleniem wszystkich produktów znajdujących się w danej kategorii. Gdy komponent się załaduje mam błąd w konsoli chrome:
Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
Komponent:
export class CategoriesDetailsComponent implements OnInit {
listCategories: Categories[] = [];
constructor(private activatedRoute: ActivatedRoute,
private productService: CategoriesProductsService) { }
ngOnInit() {
this.displayProductsByCategoryId();
}
displayProductsByCategoryId() {
const id = +this.activatedRoute.snapshot.params['id'];
this.productService.getCategoriesById(id)
.subscribe((data) => {
this.listCategories = data;
console.log(this.listCategories);
});
}
}
Szablon HTML:
<div class="row">
<div class="col-sm-4" style="cursor: pointer;" *ngFor="let categories of listCategories " [routerLink]="['/products-details', categories.Id]" >
<div *ngFor="let product of categories.Product">
<h3 style="text-align: center">Product Name: {{product.Product.Name}}</h3>
<img class="img-fluid" src="{{product.Product.Image}}">
<p style="color: yellow">Price: {{product.Product.Price}}PLN</p>
</div>
</div>
</div>
Klasy Categories i Product:
export class Categories {
Id: number;
Name: string;
Product: Products[];
}
export class Products {
Id: number;
Name: string;
Description: string;
DetailedDescription: string;
Price: string;
IsNewProduct: boolean;
PromotionalProduct: boolean;
Image: string;
CategoryId: number;
}
**Serwis: **
getCategoriesById(id) {
return this.http.get<Categories[]>('http://localhost:61085/api/Categories/GetCategoriesById/' + id);
}
- object.PNG (35 KB) - ściągnięć: 130