时间戳

首页 > 解决方案 > 通过服务在两个不同的组件之间传递数据

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

问题描述

我试图传递'ele'，它是一个包含关于我的食谱的详细信息的数组recipe-item.component.ts，recipe-detail.component.ts并且成功并在调用的变量中接收了它，selectedrecipe但是当我尝试在recipe-detail.component.htmlvia{{selectedrecipe.imagepath}}和中显示详细信息时。{{selectedrecipe.name}} 它抛出错误并说 ERROR

TypeError：无法读取 Object.eval [as updateRenderer] (RecipeDetailsComponent.html:3) 处未定义的属性“图像路径”

这是 console.log(this.selectedrecipe) https://ibb.co/bvy1Gm0的输出

配方-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)
}
}

食谱.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')
 ]

 }

配方详细信息.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)
})
}

}

配方详细信息.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>

标签： angular

解决方案

由于是selectedrecipe异步设置的，您应该在您的模板上使用默认值@Input()或使用模板中的保存导航运算符?.："

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

推荐阅读