过滤搜索管道实现

我使用的是管道过滤器过滤的项目过滤搜索管道实现

我的申请输入是在search.html文件和ITEMLIST在List.html文件

变化模型不是触发管道变换。请帮忙。以下是代码片段。

Search.html

<input placeholder="keyword..." [(ngModel)]="search"/>

List.html

<div *ngFor="let item of items | searchPipe:'name':search "> 
    {{item.name}} 
</div>

Search.pipe.ts

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name : 'searchPipe', 
}) 
export class SearchPipe implements PipeTransform { 
    public transform(value, key: string, term: string) { 
    return value.filter((item) => { 
     if (item.hasOwnProperty(key)) { 
     if (term) { 
      let regExp = new RegExp('\\b' + term, 'gi'); 
      return regExp.test(item[key]); 
     } else { 
      return true; 
     } 
     } else { 
     return false; 
     } 
    }); 
    } 
}

来源

2017-05-23 Sanjaybxl

创建小普拉克[链接]（http://plnkr.co/edit/jcvOHHJuqjYWdFmlQZB0?p=preview）和你的代码似乎很好......你可以验证功能？ – chrystian

您已将搜索输入字段添加到同一模板中，这将起作用。但是，搜索输入字段应该位于不同的组件中，并在不同的组件中填充列表项。 – Sanjaybxl

你能分叉并调整我想要的东西吗？ – chrystian

好了，根据我们的讨论和plunks我觉得我有一个答案。基本上是你所缺少的是

组件

之间的通信的搜索组件：

import { Component, Output, EventEmitter } from '@angular/core'; 

@Component({ 
    selector: 'my-search', 
    template: ` 
    <input placeholder="keyword..." [(ngModel)]="search" (keyup)=onChange()/> 
    ` 
}) 

export class SearchComponent { 
    search: String; 
    @Output() onSearchChange = new EventEmitter<Object>(); 

    onChange($event) { 
    this.onSearchChange.emit(this.search); 
    } 
}

那么一些父组件（与名单）

import { Component } from '@angular/core'; 
import { SearchComponent } from './search.component'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>Search pipe test</h1> 
    Search: <my-search (onSearchChange)="search = $event"></my-search> 
    <br/>  
    <br/> 
     <div *ngFor="let item of items | searchPipe:'name':search "> 
     {{item.name}} 
     </div> 
    ` 
}) 
export class AppComponent { 
    search: String; 
    items: Array<any> = [ 
    { id: 1, name: 'aaaaa' }, 
    { id: 2, name: 'bbbbb' }, 
    { id: 3, name: 'ccccc' }, 
    { id: 4, name: 'aabb' }, 
    { id: 5, name: 'bbcc' }, 
    ] 
}

最后工作普拉克：http://plnkr.co/edit/TzNQfDQ8K7d81ST9qKj5?p=preview

来源

2017-05-24 10:08:25 chrystian

感谢您的帮助。 – Sanjaybxl

过滤搜索管道实现

回答

相关问题