Angular2濾水管

Question

我試圖實現以下解決方案：http://plnkr.co/edit/UbHxQNjV1G8kXsIY2GyF?p=preview

但由於某種原因，它不工作。我的實現看起來像這樣：

過濾管

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

@Pipe({ 
    name: 'filter' 
}) 

export class FilterPipeService implements PipeTransform { 
transform(value: any, args: string[]): any { 
    let filter = args[0]; 

    if (filter && Array.isArray(value)) { 
     let filterKeys = Object.keys(filter); 
     return value.filter(item => 
      filterKeys.reduce((memo, keyName) => 
       memo && item[keyName] === filter[keyName], true)); 
    } else { 
     return value; 
    } 
    } 
} 

我-support.component.ts

import { FilterPipeService } from '../../services/filter-pipe.service' 


@Component({ 
    selector: 'nmg-mysupport', 
    directives: [CORE_DIRECTIVES, 
      FORM_DIRECTIVES, 
      ..., 
template: require('./my-support.component.html'), 
styles: [require('./my-support.component.scss')], 
pipes: [FilterPipeService] 
}) 
export class MySupportComponent implements OnInit { 
public faqList; 
public listFilter; 

constructor() { 
this.faqList = [ 
    {'question' : 'First Question', 'answer': 'Answer to First Question'}, 
    {'question' : 'Second Question', 'answer': 'Answer to Second Question'}, 
    {'question' : 'Third Question', 'answer': 'Answer to Third Question'}, 
    {'question' : 'Fourth Question', 'answer': 'Answer to Fourth Question'}, 
] 
} 

} 

而這個HTML

<div class="col-sm-9 col-sm-offset-3 col-md-10 page-header col-md-offset-2"> 
<h1 class="headline">Support/Hilfe</h1> 
</div> 
<div class="contentWrapper col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> 
    <div class="content"> 
    <div class="input-group input-group-sm" style="margin-bottom: 10px;"> 
     <input value="" class="form-control" placeholder="Suche" autofocus #listFilter (keyup)="0"> 
     <div class="input-group-btn"> 
     <button type="submit" class="btn btn btn-default btn-flat"><i class="fa fa-search"></i></button> 
     </div> 
    </div><br><br> 
     <tabset> 
     <tab heading="Media Grid Hilfe"><br> 
     </tab> 
     <tab heading="Häufig gestellte Fragen"><br> 
     {{listFilter.value}} 
      <div *ngFor="let faqItem of faqList | filter:{question: listFilter.value}"> 
      <h3> {{ faqItem.question }}</h3> 
      <h4> {{ faqItem.answer }}</h4> 
      </div> 
     </tab> 
     <tab heading="Glossar"><br> 
     </tab> 
     </tabset><br> 
    </div> 

如果我在試着o通過輸入任何內容進行過濾，沒有任何工作，我沒有得到任何錯誤。

Answer 1

我猜你需要

@Pipe({ 
    name: 'filter', 
    pure: false 
}) 

否則管會不會被調用時，陣列的內容變化，因爲角度變化檢測不檢查數組或對象的內容，只引用。

Answer 2

我的客人，您需要一個過濾器像AngularJS

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

@Pipe({ 
    name: 'filter' 
}) 
export class FilterPipe implements PipeTransform { 

    transform(items: Array<any>, conditions: {[field: string]: any}): Array<any> { 
    return items.filter(item => { 
     let allBlanks = true; 
     for (let field in conditions) { 
     let itemField = item[field] ? item[field].toLowerCase() : ''; 
     let conditionField = conditions[field] !== undefined ? conditions[field].toLowerCase() : ''; 
     if(conditionField !== '') {allBlanks = false;} 
     if (itemField.indexOf(conditionField) !== -1 && conditionField !== '') { 
      return true; 
     } 
     } 
     return allBlanks; 
    }); 
    } 
}