I'm encountering an issue with my HTML page where I'm using NGFor with an array. The error message I receive is as follows:
landingpage.component.html:142 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
at NgForOf.ngDoCheck (common.js:4355)
at checkAndUpdateDirectiveInline (core.js:33470)
at checkAndUpdateNodeInline (core.js:46564)
at checkAndUpdateNode (core.js:46503)
at debugCheckAndUpdateNode (core.js:47529)
at debugCheckDirectivesFn (core.js:47472)
at Object.updateDirectives (landingpage.component.html:142)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:47460)
at checkAndUpdateView (core.js:46468)
at callViewAction (core.js:46834)
My ngFor implementation looks like this:
<div class="flex-container wrap" *ngFor="let item of newestProducts">
<div class="card flex-item">
<img src="{{ item.pictureUrl }}" class="card-img-top"
alt="...">
<div class="card-body">
<p class="card-title">{{ item.aktPrice }}€</p>
<p class="card-text">{{ item.productname }}</p>
<a href="/details/{{item.id}}" class="btn btn-primary productbutton"><p class="productbuttontext">Zum
Produkt</p></a>
</div>
</div>
Here's how it's defined in my TypeScript file:
export class LandingpageComponent implements OnInit {
public images = [944, 1011, 984].map((n) => `https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg`);
public newestProducts: Product[];
public randomProduct: Product;
public gutscheine: Gutschein[];
public submitted = false;
constructor(private productService: ProductService, private gutscheinService: GutscheinService,
private router: Router, config: NgbCarouselConfig) {
config.interval = 100;
config.wrap = false;
config.keyboard = false;
config.pauseOnHover = false;
}
public ngOnInit() {
this.newestProducts = [];
this.newestProducts = this.productService.getProductsNewest();
this.gutscheine = this.gutscheinService.getGutscheine();
this.randomProduct = this.productService.getProductsRandom();
}
public gotoList() {
this.router.navigate(['/landingpage']);
}
}
I'm unable to figure out why I'm getting this error and how to resolve it. When trying to use an ng-If instead, the same error occurs.
Additionally, here is the service code:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ProductService {
private baseUrl = 'http://localhost:8080/priceoffer24/api/product';
constructor(private http: HttpClient) { }
// Methods truncated for brevity...
}
Lastly, this is the DTO structure:
import {Categorie} from './categorie';
import {Prices} from './prices';
export class Product {
public id: number;
public description: string;
public productname: string;
public link: string;
public pictureUrl: string;
public aktPrice: string;
}
The methods within the service return any, which is being cast to an array in the component.