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

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

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 但仍然错误。

有什么想法吗？尖端？谢谢你！

初始化meals array

meals: Meal[] = [];