不要以角度显示产品的详细信息4

Question

当我点击我需要的项目时

`<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.imagepath"
alt="{{recipe.name}}"
class="img-responsive"
style="max-height: 50px;">
</span>
</a>`

item.ts ：

import { Component, OnInit,Input} from '@angular/core';
import {Recipe} from '../recipe';
import{RecipeServiceService} from'../../service/recipe-service.service';
@Component({
selector: 'app-recipe-item',
templateUrl: './recipe-item.component.html',
styleUrls: ['./recipe-item.component.css']
})
export class RecipeItemComponent implements OnInit {
@Input() recipe:Recipe;
constructor(private recipeservice:RecipeServiceService) { }
ngOnInit() {
}
onSelected(){
this.recipeservice.recipeSelected.emit(this.recipe);
console.log("Item Select",this.recipe);
}
}

将所选值放入recipeSelected

服务.ts

import{Recipe} from'./../recipe-list/recipe';
import{EventEmitter} from'@angular/core';
export class RecipeServiceService {
recipeSelected=new EventEmitter<Recipe>();
private recipes:Recipe[]=[
new Recipe('انگولار 4', 'بهترین کتاب موجود ', 'http://startupsac.com/wp-content/uploads/2015/10/AngularJS-Logo.jpg'),
new Recipe('آموزش Asp Core 1.1 برای مبتدیان', 'آپدیت جدید کتاب', 'https://codeopinion.com/wp-content/uploads/2016/02/aspnetcore.png')
];
getAllRecipe(){
return this.recipes.slice();
}
}

在配方组件中，将recipeSelected的值放入selectedRecipe

食谱

import { Component, OnInit } from '@angular/core';
import{RecipeServiceService} from'./service/recipe-service.service';
import{Recipe} from'./recipe-list/recipe';
@Component({
selector: 'app-recipes',
templateUrl: './recipes.component.html',
styleUrls: ['./recipes.component.css'],
providers:[RecipeServiceService]
})
export class RecipesComponent implements OnInit {
selectedRecipe:Recipe;
constructor(private recipeservice:RecipeServiceService) { }
ngOnInit() {
this.recipeservice.recipeSelected.subscribe(
(rec:Recipe)=>{
this.selectedRecipe=rec;
})
console.log("Component Select",this.selectedRecipe);
}

}

.html

<div class="row">
<div class="col-md-5">
<app-recipe-list></app-recipe-list>
</div>
<div class="col-md-7">
<app-recipe-detail *ngIf="selectedRecipe; else infoText"
[recipe]="selectedRecipe"></app-recipe-detail>
<ng-template #infoText>
Please Select Recipe
</ng-template>
</div>
</div>

它向我显示了列表，但是当我单击该项目时，它没有向我显示食谱的详细信息。如何解决这个问题？

Answer 1

您似乎正在使用 https://github.com/crispinandrade/RecipeBookApp/代码的副本。尝试先运行它，然后将您的副本与它进行比较。这里没有问题。