CODEWITHSUNDEEP
htmlangulartypescript
wolfman928
wolfman928

Reputation: 364

Angular 8 ERROR TypeError: Cannot read property 'name' of undefined

I am playing around with angular and I get this error: ERROR TypeError: Cannot read property 'name' of undefined My code is

recipe-list.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>

recipe-item.compoent.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>

recipe-item.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() {
  }

}

I can't seem to find the problem with my code. Why is it adding a empty element shown in the screenshot enter image description here

Upvotes: 2

Views: 3084

Answers (2)

ulmas
ulmas

Reputation: 2253

I think I cracked this case: in your recipe-list component template you have <app-recipe-item></app-recipe-item> added at the end for some reason, seems like some leftover code.

The errors are likely being thrown by that component because there is no any input value provided to it. This also explains the empty element you have at the bottom of the screenshot.

Remove that and that should solve the console error you mentioned, and get rid of the empty element. Good luck!

Upvotes: 0

Jorge Mussato
Jorge Mussato

Reputation: 2514

You can simply solve this by using the "safe navigation operator".

When you use the interpolation, it is recommended to use ? ("safe navigation") when the object may be undefined.

<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>

This will clear your console problems, but you may need to *ngFor in a div that surrounds the component:

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

And a plus: when you are working inside a HTML tag, don't use interpolation, use property binding instead. (example [alt]="recipe.name")

Upvotes: 3

Related Questions