我有一个过滤结果列表的基本管道。 但我需要管道在其过滤时调用我的组件中的函数。
简而言之,我有一张带有标记的地图。 这些标记需要更新以镜像过滤的管道列表。
管道和地图当前都有效但不同步。
我在想,如果我可以让管道调用它的组件,那么它可以更新地图。
这是我的基本管道,仅过滤结果列表:
import {Pipe} from 'angular2/core';
@Pipe({
name: 'mapFilter',
pure: true
})
export class MapFilter {
transform(items, [searchTerms]) {
var term = searchTerms[0];
var town = searchTerms[2];
var county = searchTerms[1];
var filterByTown = false;
var filterByCounty = false;
if(town !== "Filter by Town")
filterByTown = true;
if(county !== "Filter by County")
filterByCounty = true;
//Filter options:
if(!filterByTown && !filterByCounty){
return items.filter(item => item.name.indexOf(term) !== -1);
}
if(filterByTown && !filterByCounty){
var termResult = items.filter(item => item.name.indexOf(term) !== -1);
return termResult.filter(item => item.town.indexOf(town) !== -1);
}
if(!filterByTown && filterByCounty){
var termResult = items.filter(item => item.name.indexOf(term) !== -1);
return termResult.filter(item => item.county.indexOf(county) !== -1);
}
if(filterByTown && filterByCounty){
var termResult = items.filter(item => item.name.indexOf(term) !== -1);
var townResult = termResult.filter(item => item.town.indexOf(town) !== -1);
return townResult.filter(item => item.county.indexOf(county) !== -1);
}
}
}
这是我的过滤器的html:
我如何传递地图的标记数组,地图会选择它吗?
我需要在下面的代码中添加“this.markers”
<tr *ngFor="#item of jobs | mapFilter: [searchTerm, county, town]" class="animated fadeIn" (click)="viewJob(item)">
答案 0 :(得分:0)
我不认为管道是这个用例的正确工具。在代码中创建过滤后的数据,并将结果分配给字段并将视图绑定到此字段。 无论如何,管道将紧密耦合到这个组件,所以为什么不首先将代码添加到组件中。
如果你想要追求当前的方法,你可以做的是将其他参数传递给管道,如
<tr *ngFor="let item of jobs | mapFilter: [searchTerm, county, town, markers]" class="animated fadeIn" (click)="viewJob(item)">
每次标记更改时都会再次调用管道。