Angular2过滤器/管道使用单选按钮进行过滤

Question

我正在寻找一种过滤解决方案，可以实时过滤一组重复的元素。我在答案here 中有一个基本的管道解决方案。

我发现<input [(ngModel)]='query'/> 只有在同一个组件中才有效。

但是 - 我需要让过滤器值来自另一个组件中预先填充的单选按钮。

这是我目前的代码。

filter.component

<div class="topic" *ngFor="let topic of topics">
  {{topic.term}}
  <input [(ngModel)]="query" type="radio" name="topicFilter" [value]="topic.term"/>
</div>

grid.component

<router-outlet></router-outlet> // this pulls in the filter.component

<input [(ngModel)]="query"> // this is a text input that works as wanted ( for showing what I'm wanting to achieve )

<grid-item *ngFor="let user of users | topicFilterPipe: 'topic':query">
  <a [routerLink]="['user-story', user.uid]">
    <h1>{{user.fname}}</h1>
  </a>
  {{user.topic}}
</grid-item>

filter.pipe

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

@Pipe({
  name: 'topicFilterPipe'
})
export class TopicFilterPipePipe implements PipeTransform {

  public transform(value: Array<any>, keys: string, term: string) {
    console.log('pipe has run');
    if (!term) return value;
    return (value || []).filter((item) => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));

  }

}

基本上 - 尝试实现与文本输入相同的方法，但使用 filter.component 中的选定单选。但是我正在努力将选定的值传递到管道中，然后使用 ngModel 进行过滤。谢谢！

注意：我对 angular2 非常陌生 + 过滤器组件必须保留在单独的组件中

Answer 1

您的问题是关于组件之间的通信。 FilterComponent 需要通知 GridComponent 新查询已更新。

由于服务在 Angular 中是一个单例（存在例外但在这里不相关），如果我们从一个组件设置服务中的数据，其他组件可以访问数据。我们通过使用 BehaviorSubject 来存储信息来使用观察者模式。

查询服务：

此服务将具有查询数据。 getQuery 将提供一个可被任何组件收听的可观察对象。

@Injectable()
export class QueryService{

    public query = new BehaviorSubject<string>('');

    public getQuery(){
        return query;
    }

    public setQuery(queryStr){
        this.query.next(queryStr);
    }
}

过滤器组件

FilterComponent 将在值更改时调用服务并更新。

HTML

<input 
    [ngModel]="query"
    (ngModelChange)="updateQuery($event)" 
    type="radio"
    name="topicFilter" [value]="topic.term"/>

TS

constructor(private queryService: QueryService){}
public updateQuery(query){
    queryService.setQuery(query);
}

网格组件

public query:string; 

constructor(private queryService: QueryService){}

ngOnInit(){
  // .... other code
  queryService.getQuery()
     .subscribe(queryVal => {
          this.query = queryVal;
     });

}

或

您可以使用角度事件机制并触发事件，以便 gridcomponent 可以捕获事件并获取新的查询。但服务的做事方式更好。由于您在路由器内部有FilterComponent，因此这里很难使用事件机制。

在任何一种情况下，您都可以使用问题中提到的管道。

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

@Pipe({
  name: 'topicFilterPipe'
})
export class TopicFilterPipePipe implements PipeTransform {

  public transform(value: Array<any>, keys: string, term: string) {
    console.log('pipe has run');
    if (!term) return value;
    return (value || []).filter((item) => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));

  }

}

您可以使用问题中提到的管道，也可以直接在组件中自己过滤列表。

如果您仍然有问题，请创建一个 plnkr，我可以用这个答案为您更新它。

Answer 2

您可以使用如下方法构建服务：

performFilter(filterBy: string): IProduct[] {
    filterBy = filterBy.toLocaleLowerCase();
    return this.products.filter((product: IProduct) =>
          product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
}

这是过滤产品列表...但您可以对其进行定制以过滤您需要的任何内容。而且由于这需要在服务中以便可以共享，因此您很可能需要传入要过滤的列表。所以更像这样：

performFilter(products: IProduct[], filterBy: string): IProduct[] {
    filterBy = filterBy.toLocaleLowerCase();
    return products.filter((product: IProduct) =>
          product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
}