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>组件，因此它将以这种方式工作。

使用管道过滤器点击时无法显示正确的阵列详细信息

1 个答案: