Seeking to obtain a picture link of the object. The objects are stored in an array and the typescript method looks like this:
getMealPicture(orderLineMeal: OrderLine): string {
for (let meal of this.meals) {
if (meal.id === orderLineMeal.mealId) {
return meal.picture;
}
}
}
This method returns a string which is then inserted into HTML:
<img src="{{getMealPicture(orderLineMeal)}}" alt="" class="cartMeal-picture">
However, I encountered this error:
ERROR TypeError: Cannot read property 'length' of undefined
at CheckoutPageComponent.push../src/app/checkout-page/checkout-page.component.ts.CheckoutPageComponent.getMealPicture (checkout-page.component.ts:113)
at Object.eval [as updateRenderer] (CheckoutPageComponent.html:9)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:22482)
at checkAndUpdateView (core.js:21857)
at callViewAction (core.js:22093)
at execEmbeddedViewsAction (core.js:22056)
at checkAndUpdateView (core.js:21853)
at callViewAction (core.js:22093)
at execComponentViewsAction (core.js:22035)
at checkAndUpdateView (core.js:21858)
The error points to line 113 in the component file where the HTML img tag is located. Despite the images being present, they sometimes take a couple of seconds to load after the content loads. Could this be causing the issue?
The array of meals (this.meals) is fetched from a .NET backend service. It is initialized in the constructor as follows:
meals: Meal[];
this.mealService.getAllMeals().subscribe( listOfMeals => {
this.meals = listOfMeals;
});
I have tried various solutions but have been unable to resolve this console error, although it doesn't seem to impact functionality. Each time I reload the page, the number of errors fluctuates between 2-4. I speculated that the delayed loading of img src could be the cause, hence I placed the array initialization in the constructor, yet the error persists.
Any insights or suggestions would be greatly appreciated. Thank you!