无法读取未定义的属性“长度”-Angular 7

Question

试图获取对象的图片链接。这些对象在数组中，打字稿中的方法如下所示：

getMealPicture(orderLineMeal: OrderLine): string {
    for (let meal of this.meals) {
      if (meal.id === orderLineMeal.mealId) {
        return meal.picture;
      }
    }
  }

返回字符串，并将此字符串放入HTML中：

<img src="{{getMealPicture(orderLineMeal)}}" alt="" class="cartMeal-picture">

我收到此错误：

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)

第一行指向此HTML img标签所在的行113。但是图像在那里，它们有时会在内容加载后加载第二到第二个。您是否认为这是问题所在？

这些膳食（this.meals）是从服务和后端.NET获取的。所以我在构造函数中初始化了这个数组：

meals: Meal[];

this.mealService.getAllMeals().subscribe( listOfMeals => {
  this.meals = listOfMeals;
});

我尝试了所有操作，但是即使该错误不影响任何操作，也无法解决此控制台错误。每次重新加载页面时，它们的数量都不同。通常是2-4。

我认为这是因为img src不会立即加载，需要一些时间，所以我将数组init放在了构造函数中，但仍然出错。

有什么想法吗？提示？谢谢！

Answer 1

初始化meals数组

meals: Meal[] = [];