无法显示正确的阵列细节时，它是可点击使用管道过滤器

Question

我试图实现搜索栏使用管道过滤器为我的数组是可点击的（类似配方列表），它过滤我的食谱的名称。它的工作正常，直到我点击一个项目，它仍然有它的旧索引，因此给我错误的recipeDetails组件（另一个配方）。有人可以帮助我解决这个问题。

管道过滤器代码：

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())); 
    } 
    } 

} 

食谱详细信息编码：

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

配方服务代码

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); 
} 
} 

配方列表项

<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

您应该使用recipe对象而不是索引在click事件中进行处理。由于您已将对象传递给<app-recipes-list-item>组件，因此它将以此方式工作。