When using *ngFor, I am facing an issue with fetching data from my component.ts to my component.html
Interestingly, the same method works for one class but not for another.
Let's take a look at my service class:
export class FoodListService {
private url = environment.serverURL;
constructor(private http: HttpClient) {
}
//get all products from one store
getAllProducts(storeId: Number): Observable<FoodListModelServer[]> {
return this.http.get<FoodListModelServer[]>(this.url + 'foodlist/' + storeId);
}
Moving on to my component class:
export class FoodListComponent implements OnInit {
foodlist: FoodListModelServer[] = [];
constructor(private foodListService: FoodListService, private router: Router, private route: ActivatedRoute) {}
ngOnInit(): void {
this.foodListService.getAllProducts(this.storeId).subscribe(food => {
this.foodlist = food;
console.log(this.foodlist);
});
}
}
And here is how it looks in my component.html:
<div class="col-md-8 col-lg-10 col-sm-6 card">
<li *ngFor="let foodlist of foodlist">
{{foodlist.food_name}}
</li>
</div>
Regarding Console.log(this.foodlist):
Upon checking, I see an object {count: 5, stores: Array(5)}
I wonder why there is a count included in the object instead of just listing the Array?
How can I retrieve only the array without the count?
Interestingly, the code works perfectly fine in another component. Despite trying various online suggestions, I have not been able to make progress on this problem.