Question

我在使用搜索管道渲染数组中的项目时遇到问题这是我的app.module：

import {NgModule}      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';    
import { AppComponent }  from './app.component';
import {FormsModule} from "@angular/forms";
import {CombBox} from "./ComboBox/ComboBox.component";
import {SortPipe} from "./ComboBox/Sort.pipe";
import {SearchPipe} from "./ComboBox/Filter.pipe";

@NgModule({
  imports:      [ BrowserModule,  FormsModule],
  declarations: [ AppComponent ,CombBox ,SortPipe,SearchPipe],
  bootstrap:    [ AppComponent ],
})
export class AppModule { }

这是我的搜索管道

import {Pipe, PipeTransform} from '@angular/core';
import {Hero} from "../hero";
@Pipe({
  name : 'searchPipe',
  pure:false
})

export class SearchPipe implements PipeTransform {
  transform(items: Array<Hero>, letter: string): any {
    return items.filter(item => item.name.toUpperCase().indexOf(letter)>-1);
  }
   }

这是我的Html视图

<div class="InputHolder">
  <input type="text" class="Input-text" (keyup)="checkkey($event)"  (keyup.enter)="AddHero(Inputtxt.value)" (focus)="OnfocusFunction()" (focusout)="focusOutFunction()"  #Inputtxt/>
</div>
<div class="UlHolder">
  <ul class="heroes" id="hello" *ngIf="IsVisable"  >
    <li  *ngFor="let hero of heroes | sort |searchPipe: Inputtxt.value">
      {{hero.name}}
    </li>
  </ul>
</div>

我无法访问我创建的英雄数组的数据并显示所选的搜索项目，因为当我刚进入搜索管道时，列表视图中的所有数据都消失了

Answer 1

import {Pipe, PipeTransform} from '@angular/core';
import {Hero} from "../hero";
@Pipe({
  name : 'searchPipe',
  pure:false
})

export class SearchPipe implements PipeTransform {
  transform(items: Array<Hero>, letter: string): any {
    return items.filter(item => item.name.toUpperCase().indexOf(letter.toUpperCase())>-1);

Angular 2 Pipe Filter用于渲染数组

1 个答案: