CODEWITHSUNDEEP
javascripthtmlangulartypescript
Suryaprakash
Suryaprakash

Reputation: 86

ERROR TypeError: Cannot read property 'imgPath' of undefined

I am showing my full error in my console

ERROR TypeError: Cannot read property 'name' of undefined
    at RecipeItemComponent_Template (recipe-item.component.html:3)
    at executeTemplate (core.js:7302)
    at refreshView (core.js:7171)
    at refreshComponent (core.js:8325)
    at refreshChildComponents (core.js:6964)
    at refreshView (core.js:7221)
    at refreshComponent (core.js:8325)
    at refreshChildComponents (core.js:6964)
    at refreshView (core.js:7221)
    at refreshComponent (core.js:8325)

And another error in recipedetail.html

core.js:4197 ERROR TypeError: Cannot read property 'imgPath' of undefined
    at RecipeDetailComponent_Template (recipe-detail.component.html:3)

Here, it's showing error in line number 3 of recipe-item.component, so I am showing the code.

recipe-item.component.html

<a href="#" class="list-group-item clearfix" (click)="OnSelected()">
    <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.imgPath" alt="{{recipe.name}}" class="img-responsive" style="max-height :50px;">
    </span>
</a>

its typescript file .ts

import { Component, OnInit, Input, EventEmitter, Output } 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
  @Output() recipeSelected = new EventEmitter<void>()
  constructor() { }

  ngOnInit(): void {
  }
  OnSelected(){
    this.recipeSelected.emit();
  }

}

I have been accessing the recipe-item in recipe list by

<app-recipe-item *ngFor="let recipeEl of recipes" [recipe]="recipeEl" 
(recipeSelected)="onRecipeSelected(recipeEl)"></app-recipe-item>

its recipe-list.ts

@Output() RecipeWasSelected = new EventEmitter<Recipe>()
  recipes:Recipe[] =[
    new Recipe('A test',
     'A simple trial of recipe',
     'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT1KN_qjzlsCNEmQLQieDRT4lWfgYkyJ3G6pQ&usqp=CAU'),
    new Recipe('A test', 
    'A simple trial of recipe',
    'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT1KN_qjzlsCNEmQLQieDRT4lWfgYkyJ3G6pQ&usqp=CAU')
  ];
onRecipeSelected(recipe: Recipe){
    this.RecipeWasSelected.emit(recipe)

Recipe-detail.html

<div class="row">
    <div class="col-xs-12">
        <img [src]="recipe.imgPath" alt="img_name" class="img-responsive" style="max-height:300px;">
    </div>
</div>

I don't know but still its undefined. And I have added everything in app.module.ts too

Upvotes: 1

Views: 667

Answers (1)

Rahul Beniwal
Rahul Beniwal

Reputation: 677

It is happening due to component template loaded before recipe was fetched. Please apply check on it like below, it will work.

<span class="pull-right" *ngIf="recipe">
    <img [src]="recipe.imgPath" alt="{{recipe.name}}" class="img-responsive" style="max-height :50px;">
</span>

Upvotes: 1

Related Questions