不顯示產品的詳細angular4

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

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

recipe.ts

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/代碼的副本。試着先運行它，然後將它與它進行比較。這裏沒有問題。