html - Angular 8 ข้อผิดพลาด TypeError: ไม่สามารถอ่านคุณสมบัติ 'name' ของ undefined

ฉันกำลังลองเล่นกับ Angular และฉันได้รับข้อผิดพลาดนี้: ERROR TypeError: Cannot read property 'name' of undefined โค้ดของฉันคือ

รายการสูตร.component.ts

import { Component, OnInit } from '@angular/core';

import { Recipe } from '../recipe.model'

@Component({
  selector: 'app-recipe-list',
  templateUrl: './recipe-list.component.html',
  styleUrls: ['./recipe-list.component.css']
})
export class RecipeListComponent implements OnInit {
  recipes: Recipe[] = [
    new Recipe('Test', 'Test Code', 'https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_960_720.jpg'),
    new Recipe('Test 2', 'Test Code', 'https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_960_720.jpg')
  ];

  constructor() { }

  ngOnInit() {
  }

}

recipe-list.component.html

<div class="row">
    <div class="div col-xs-12">
        <button class="btn btn-success">New Recipe</button>
    </div>
</div>
<hr>
<div class="row">
    <div class="col-xs-12">
      <app-recipe-item
        *ngFor="let recipeEl of recipes"
      [recipe]="recipeEl"></app-recipe-item>
    </div>
</div>
<app-recipe-item></app-recipe-item>

สูตร-รายการ.ส่วนประกอบ.html

<a href="#" class="list-group-item clearfix">
  <div class="pull-left">
    <h4 class="list-group-item-heading">{{ recipe.name }}</h4>
    <p class="list-group-item-text">{{ recipe.description }}</p>
  </div>
  <span class="pull-right">
    <img [src]="recipe.imagePath" alt="{{ recipe.name }}" class="img-responsive" style="max-height:50px">
  </span>
</a>

สูตร-รายการ.component.ts

import {Component, Input, OnInit} from '@angular/core';
import {Recipe} from '../../recipe.model';

@Component({
  selector: 'app-recipe-item',
  templateUrl: './recipe-item.component.html',
  styleUrls: ['./recipe-item.component.css']
})
export class RecipeItemComponent implements OnInit {
  @Input() recipe: Recipe;

  constructor() {
    console.log('Recipe is' + this.recipe);
  }

  ngOnInit() {
  }

}

ฉันดูเหมือนจะหาปัญหาในโค้ดของฉันไม่เจอ ทำไมมันถึงเพิ่มองค์ประกอบว่างที่แสดงในภาพหน้าจอ

คำตอบ #1

คุณสามารถแก้ปัญหานี้ได้อย่างง่ายดายโดยใช้ 'ตัวดำเนินการนำทางที่ปลอดภัย'

เมื่อคุณใช้การแทรกค่า แนะนำให้ใช้ ? ("การนำทางอย่างปลอดภัย") เมื่อวัตถุอาจไม่ได้ถูกกำหนดค่า

<a href="#" class="list-group-item clearfix">
  <div class="pull-left">
    <h4 class="list-group-item-heading">{{ recipe?.name }}</h4>
    <p class="list-group-item-text">{{ recipe?.description }}</p>
  </div>
  <span class="pull-right">
    <img [src]="recipe.imagePath" [alt]="recipe.name" class="img-responsive" style="max-height:50px">
  </span>
</a>

สิ่งนี้จะล้างปัญหาในคอนโซลของคุณ แต่คุณอาจจำเป็นต้องใช้ *ngFor ใน div ที่ล้อมรอบคอมโพเนนต์:

<div *ngFor="let recipeEl of recipes">
    <app-recipe-item [recipe]="recipeEl"></app-recipe-item>
</div>

และสิ่งที่เพิ่มเติม: เมื่อคุณกำลังทำงานภายในแท็ก HTML อย่าใช้การแทรกค่า ใช้การผูกคุณสมบัติแทน (ตัวอย่าง [alt]="recipe.name")

คำตอบ #2

ฉันคิดว่าฉันแก้ไขคดีนี้ได้แล้ว: ในเทมเพลตคอมโพเนนต์ recipe-list ของคุณ คุณมี <app-recipe-item></app-recipe-item> ถูกเพิ่มไว้ตอนท้ายด้วยเหตุผลบางอย่าง ดูเหมือนว่าจะเป็นโค้ดที่เหลืออยู่

ข้อผิดพลาดน่าจะเกิดจากส่วนประกอบนั้นเนื่องจากไม่มีการส่งค่าข้อมูลใด ๆ ให้กับมัน ซึ่งนี่ก็อธิบายถึงองค์ประกอบว่างที่คุณมีอยู่ด้านล่างของภาพหน้าจอด้วย

เอาส่วนนั้นออกแล้วมันควรจะแก้ข้อผิดพลาดคอนโซลที่คุณกล่าวถึง และกำจัดองค์ประกอบว่างนั้น โชคดี!