Question

我试图将包含有关我的食谱的详细信息的数组“ ele”从recipe-item.component.ts传递到recipe-detail.component.ts，并成功地将其接收到名为selectedrecipe的变量中，但是当我尝试通过recipe-detail.component.html和{{selectedrecipe.imagepath}}在{{selectedrecipe.name}}中显示详细信息时它抛出错误并说ERROR

TypeError：无法读取未定义的属性“ imagepath” 在Object.eval [作为updateRenderer]（RecipeDetailsComponent.html：3）

这是console.log（this.selectedrecipe）https://ibb.co/bvy1Gm0

的输出

recipe-item.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Recipe } from 'src/app/shared/recipe.modal';
import { Recipeservice } from '../../recipe.service';

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

ngOnInit() {

}
onrecipeclicked(){
this.reservice.recipeselected.emit(this.ele)
}
}

recipe.service.ts

import { Recipe } from '../shared/recipe.modal';
import { EventEmitter } from '@angular/core';

export class Recipeservice{
recipeselected=new EventEmitter<Recipe>()
recipes:Recipe[]=[
    new Recipe('Big Fat Burger','What else you need to say 
?','https://www.seriouseats.com/recipes/images/2015/07/20150702- 
sous-vide-hamburger-anova-primary-1500x1125.jpg'),
    new Recipe('Tasty Schnitzel','A super tasty burger',' 
https://www.seriouseats.com/recipes/images/2015/07/20150702- 
sous-vide-hamburger-anova-primary-1500x1125.jpg')
 ]

 }

recipe-details.component.ts

import { Component, OnInit } from '@angular/core';
import { Recipeservice } from '../recipe.service';

@Component({
 selector: 'app-recipe-details',
templateUrl: './recipe-details.component.html',
styleUrls: ['./recipe-details.component.css']
})
export class RecipeDetailsComponent implements OnInit {

constructor(private reservice:Recipeservice) { }
selectedrecipe
ngOnInit() {
this.reservice.recipeselected.subscribe((recipe)=>{
this.selectedrecipe=recipe
console.log(this.selectedrecipe)
})
}

}

recipe-details.component.html

<div class="row">
<div class="col-xs-12">
  <img src="{{selectedrecipe.imagepath}}" alt=" . 
{{selectedrecipe.name}}" class="img-responsive" style="max- 
height:300px">
</div>
</div>
<div class="row">
<div class="col-xs-12">
  <h1></h1>
</div>
 </div>
<div class="row">
<div class="col-xs-12">
  <div class="btn-group">
    <button class="btn btn-primary dropdown-toggle" 
type="button">Manage Recipe <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a  style="cursor:pointer;">Shopping List</a></li>
      <li><a href="#">Edit Recipe</a></li>
      <li><a href="#">Delete Recipe</a></li>
    </ul>
  </div>
</div>
</div>
<div class="row">
<div class="col-xs-12">

</div>
</div>
<div class="row">
<div class="col-xs-12">
  <!-- Ingredients -->
  <ul class="list-group">
    <li class="list-group-item"
    >
  </li>
  </ul>
</div>
</div>

Answer 1

由于selectedrecipe是异步设置的，因此您应该在@Input()上使用默认值，或者在模板内部使用保存导航操作符?.：“

<img src="{{selectedrecipe?.imagepath}}" alt="{{selectedrecipe?.name}}">

Answer 2

另一种方法是，在寻找任何属性之前，先检查*ngIf条件下的变量本身：

<span *ngIf="selectedrecipe">
    <img src="{{selectedrecipe.imagepath}}" alt="{{selectedrecipe.name}}" class="img-responsive" style="max-height:300px">
</span>

通过服务在两个不同组件之间传递数据

2 个答案: