【发布时间】:2017-02-17 12:07:30
【问题描述】:
我已经为表格创建了一个通用的搜索管道,我还将列值添加到了选择框中,现在我需要从选择框中获取选定的值并在我的管道中访问它
以下是供您参考的代码
管道
export class searchPipe implements PipeTransform {
transform(values: any[], filter: string, selectedvalue:any): any {
console.log(selectedvalue);
if (!values || !values.length) return [];
if (!filter) return values;
filter = filter.toUpperCase();
if (filter && Array.isArray(values)) {
const keys = Object.keys(values[0]);
return values.filter(v => v && keys.some(k => v[k].toUpperCase().indexOf(filter) >= 0));
}
}
}
HTML
<select *ngIf="showColFilter" [(ngModel)]="selecedValues">
<option *ngFor="let colValues of tabData | columnPipe">{{colValues}}</option>
</select>
【问题讨论】:
-
您可以传递多个参数,用分号分隔值 -
columnPipe:filter:selectedValue。这是文档的链接:angular.io/docs/ts/latest/guide/pipes.html#!#custom-pipes -
我不能在指向搜索过滤器的模板中提供这样的 columnPipe:filter:selectedValue
-
可能我遗漏了一些东西,但所选值按预期传递:plnkr.co/edit/B3Tr1I2saLOxIXGjA8xU?p=preview(请忽略不稳定的选择,因为所选项目已从选项中删除)。你能更新你的问题并发布一个 plunker repo 吗?
-
@GeorgeK 这里是 plunkr repo plnkr.co/edit/iR64EKawUzIfcYc3T4db?p=preview
-
有几点: 1. (ngModel) 不能在没有FormsModule 的情况下使用! 2. 传递给管道的参数不是按名称映射的!您将需要始终传递过滤器和选定的值这是更新的 plunker - plnkr.co/edit/8rul0gyjySbulwj9kUyl?p=preview
标签: angular angular2-pipe