Angular2过滤器/管道使用单选按钮进行过滤 [英] Angular2 filter/pipe using radio buttons to filter

问题描述

我正在寻找一种过滤解决方案，该解决方案将对一组重复的元素进行实时过滤.在答案此处中，我有一个基本的管道解决方案.

I'm looking for a filtering solution that will live filter a repeated set of elements. I have a basic pipe solution found in the answers here.

我发现<input [(ngModel)]='query'/>仅在同一组件中有效.

What I've found is that <input [(ngModel)]='query'/> will only work if it's within the same component.

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

However - I need to have the filter value coming from pre populated radio buttons within another component.

到目前为止，这是我的代码.

Here is my code so far.

filter.component

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

网格组件

<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进行过滤.谢谢！

Basically - trying to implement the same method that the text input does, but with the selected radio that is within the filter.component. However I'm struggling to pass the selected value into the pipe & then filter using ngModel. Thank you!

注意::我是angular2的新手，所以滤镜组件必须保留在单独的组件中

NOTE: I'm VERY new to angular2 + The filter component must remain in a seperate component

推荐答案

您的问题与组件之间的通信有关. FilterComponent需要通知GridComponent新查询已更新.

Your problem is about communication between components. FilterComponent needs to inform GridComponent that a new query is updated.

由于Service是Angular中的一个单例(存在例外，但此处不相关)，如果我们从一个组件中设置服务中的数据，则其他组件可以访问该数据.我们通过使用BehaviorSubject来存储信息来使用观察者模式.

Since Service is a singleton in Angular(exceptions exist but not relevant here) if we set the data in service from one component other component can access the data. We are using Observer pattern by using BehaviorSubject to store info.

QueryService:

QueryService :

此服务将具有查询数据. getQuery将给出一个可观察的对象，任何组件都可以收听.

This service will have the query data. getQuery will give an observable which can be listened to by any component.

@Injectable()
export class QueryService{

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

    public getQuery(){
        return query;
    }

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

FilterComponent

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

FilterComponent will call the service and update when value changes.

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

GridComponent

public query:string; 

constructor(private queryService: QueryService){}

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

}

OR

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

You can use angular event mechanism and trigger an event so that gridcomponent can catch the event and get the new query . But service way of doing is better . Since you have the FilterComponent inside router, its difficult to use event mechanism here.

无论哪种情况，您都可以使用问题中提到的管道.

In either case you can use the pipe as mentioned in your question.

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

  }

}

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

You can either use the pipe you mentioned in the question or filter the list yourself in the component directly.

如果您仍然有问题，请创建一个plnkr，我可以通过此答案为您更新.

If you still have problems, create a plnkr, I can update it for you with this answer.

这篇关于Angular2过滤器/管道使用单选按钮进行过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！