Impossible d'afficher les détails de tableau corrects lorsqu'il est cliquable à l'aide du filtre de canalisation

Question

J'ai essayé d'implémenter la barre de recherche en utilisant le filtre de canalisation pour mon tableau qui est cliquable (quelque chose comme la liste de recettes) et Filtrage mes recettes par nom. Cela fonctionne très bien, jusqu'à ce que je clique sur un élément et il a toujours son ancien index, ce qui me donne le mauvais composant recipeDetails (d'une autre recette). Quelqu'un peut-il m'aider à résoudre ce problème?

pipe Code de filtre:

import { Pipe, PipeTransform } from '@angular/core'; 
import {Recipe} from "../recipes/recipe.model"; 

@Pipe({ 
    name: 'filter' 
}) 
export class FilterPipe implements PipeTransform { 

    transform(recipes:Recipe[],filteredString:string): any { 
    if(filteredString.length===0){ 
     return recipes 
    }else{ 
     return recipes.filter(recipe=>recipe.name.toLowerCase().includes(filteredString.toLowerCase())); 
    } 
    } 

} 

Recette Détails Code:

<div class="row"> 
    <div class="col-xs-12"> 
    <div class="row"> 
     <div class="col-xs-12"> 
     <input id="search" type="text" name="search" placeholder="Search for a Recipe" [(ngModel)]="search"> 
     </div> 
    </div> 
    <app-recipes-list-item *ngFor="let recipe of (recipes |filter:search);let i=index" [recipe]="recipe" [index]="i"></app-recipes-list-item> 
    </div> 
</div> 

code de service Recette

import {Recipe} from "../recipes/recipe.model"; 
import {EventEmitter, Injectable} from "@angular/core"; 
import {Ingredient} from "../shared/ingredient.model"; 
import {ShoppingListService} from "./shopping-list.service"; 
import {Subject} from "rxjs/Subject"; 

@Injectable() 
export class RecipesService{ 
    recipeEmitted=new Subject<Recipe>(); 
    ingredientDeleted=new Subject<Recipe>(); 
    recipesChanged=new Subject<Recipe[]>(); 
private recipes:Recipe[]=[new Recipe('Super Ecd asy Egg Casserole','http://images.media-allrecipes.com/userphotos/560x315/2195255.jpg','Another husband-approved recipe..',[new Ingredient('Apple',10),new Ingredient('Banana',10)]), 
    new Recipe('Super Easy Egg Casserole','http://images.media-allrecipes.com/userphotos/560x315/2195255.jpg','Another husband-approved recipe. Made a couple times recently because of how easy it is to make! This recipe is easy to double or triple, but you may have to cook a bit longer if doing so.',[new Ingredient('Apple',10),new Ingredient('Banana',10)]) 
    ]; 
constructor(private shoppingService:ShoppingListService){} 

    getRecipes(){ 
    return this.recipes.slice(); 
    } 
    getRecipe(id:number){ 
    return this.recipes[id]; 
    } 
    deleteIngredient(recipeId:number,ingredientId:number){ 
    this.recipes[recipeId].ingredients.splice(ingredientId,1); 
    this.ingredientDeleted.next(this.getRecipe(recipeId)); 
    } 
    updateRecipe(id:number,recipe:Recipe){ 
    this.recipes[id]=recipe; 
    this.recipesChanged.next(this.getRecipes()); 
    } 
    addRecipe(recipe:Recipe){ 
    this.recipes.push(recipe); 
    this.recipesChanged.next(this.getRecipes()); 
    } 
addIngredientsToShoppingList(ingredients:Ingredient[]){ 
    this.shoppingService.addRecipeIngredients(ingredients); 
} 
} 

Liste des recettes Article

<a style="{cursor:pointer}" [routerLink]="['/recipes',index]" routerLinkActive="active" class="list-group-item clearfix"> 
    <div class="row"> 
    <div class="col-xs-9"> 
     <div class="pull-left"> 
     <h4 class="list-group-item-heading">{{recipe.name}}</h4> 
     <p class="list-group-item-text">{{recipe.description}}</p> 
     </div> 
    </div> 
    <div class="col-xs-3"> 
     <span class="pull-right"> 
     <img src="{{recipe.imageUrl}}" class="img-responsive" style="max-height:50px;"/> 
     </span> 
    </div> 
    </div> 
</a> 

Answer 1

Vous devez utiliser l'objet recipe au lieu de l'index pour le traitement dans l'événement click. Puisque vous passez déjà l'objet au composant <app-recipes-list-item>, cela fonctionnera de cette façon.