Question

当我点击产品时，我需要显示产品的详细信息。但是当我点击它没有向我显示任何事情并且在firebug中没有显示任何错误。

问题是什么？我该如何解决？

Item.html：

    <a href="#"
   class="list-group-item clearfix"
   (click)="onSelected()">
  <span class="pull-left">
    <img [src]="recipe.imagepath"
         alt="{{recipe.name}}"
         class="img-responsive"
         style="max-height: 50px;">
  </span>
  <div class="pull-right">
    <h4 class="list-group-item-heading" id="heading">{{recipe.name}}</h4>
    <p class="list-group-item-text" id="desc">{{recipe.description}}</p>
  </div>

</a>

Item.ts：

    import { Component, OnInit,Input,EventEmitter,Output } from '@angular/core';
import { Recipe } from '../recipe';

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

    @Input() recipe: Recipe;
    @Output() recipeSelected = new EventEmitter<void>();
    constructor() { }

    ngOnInit() { }

    onSelected() {
        this.recipeSelected.emit();
    }


}

Recipe-List.html：

    <div class="row">
  <div class="col-xs-12">
    <button class="btn btn-success" id="btn_newbook">کتاب جدید</button>
  </div>
</div>
<hr>
<div class="row">
  <div class="col-xs-12">
    <app-recipe-item
                     *ngFor="let recipe of recipes"
                     [recipe]="recipe"
                     (recipeSelected)="onRecipeSelected(recipe)"></app-recipe-item>
  </div>
</div>

Recipe-List.ts：

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { Recipe } from './recipe';

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

    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')];

    @Output() recipeWasSelected = new EventEmitter<Recipe>();
    constructor() {
    }

    ngOnInit() {
    }

    onRecipeSelected(recipe: Recipe) {
        this.recipeWasSelected.emit(recipe);
    }

}

食谱：

<div class="row">
  <div class="col-md-7">
    <app-recipe-detail *ngIf="selectedRecipe; else infoText" [recipe]="selectedRecipe"></app-recipe-detail>
    <ng-template #infoText>
      <p>لطفا یک محصول را انتخاب کنید . . . </p>
    </ng-template>
  </div>
  <div class="col-md-5">
    <app-recipe-list (recipeWasSelected)="selectedRecipe = $event"></app-recipe-list>
  </div>
</div>

食谱细节：

    <div class="row">
  <div class="col-xs-12">
    <img [src]="recipe.imagepath"
         alt="{{recipe.name}}"
         class="img-responsive"
         style="max-height: 300px;">
  </div>
</div>
<div class="row">
  <div class="col-xs-12" id="head-detail">
    <h1>{{recipe.name}}</h1>
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    <div class="btn-group">
      <button type="button"
              class="btn btn-primary dropdown-toggle">
        مدیریت <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">اضافه به سبد خرید</a></li>
        <li><a href="#">ویرایش</a></li>
        <li><a href="#">حذف</a></li>
      </ul>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-xs-12" id="desc-detail">
   {{recipe.description}}
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    Ingredients
  </div>
</div>

Recipe-Detail.ts：

    import { Component, OnInit, Input } from '@angular/core';
import { Recipe } from '../recipe-list/recipe';

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

    @Input() recipe: Recipe;

  constructor() { }

  ngOnInit() {
  }

}

Answer 1

在项目

中选择后忘记将食谱发送到食谱列表

export class RecipeItemComponent implements OnInit {

    @Input() recipe: Recipe;
    @Output() recipeSelected = new EventEmitter<Recipe>();
    constructor() { }

    ngOnInit() { }

    onSelected() {
        this.recipeSelected.emit(this.recipe);
    }
}

为什么不显示产品的详细信息

1 个答案: