過濾搜索管道實現

我使用的是管道過濾器過濾的項目過濾搜索管道實現

我的申請輸入是在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

過濾搜索管道實現

回答

相關問題