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;
    }
  }
}

MY-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>

如果我尝试通过在其中键入内容进行过滤，则无法正常工作，我也不会遇到任何错误。

Answer 1

我想你需要

ImmutableTable<R,C,V>

否则当数组内容发生变化时，管道不会被调用，因为角度变化检测不会检查数组或对象内容，只检查引用。

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;
    });
  }
}