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/代码的副本。尝试先运行它，然后将它与副本进行比较。这里没有问题。

不要在angular4中显示产品的细节

1 个答案: