无法读取未定义的属性“长度” - 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[] = [];