如何调用带有多个参数的Angular 2管道?

我知道我可以像这样调用一个管道:

{{ myData | date:'fullDate' }}

这里date管道只接受一个参数。 从组件的模板HTML和直接在代码中调用具有更多参数的管道的语法是什么?< / p >

289104 次浏览

在你的组件模板中,你可以使用多个参数,用冒号分隔:

\{\{ myData | myPipe: 'arg1':'arg2':'arg3'... }}

在你的代码中,它看起来是这样的:

new MyPipe().transform(myData, arg1, arg2, arg3)

在你管道中的transform函数中,你可以像这样使用参数:

export class MyPipe implements PipeTransform {
// specify every argument individually
transform(value: any, arg1: any, arg2: any, arg3: any): any { }
// or use a rest parameter
transform(value: any, ...args: any[]): any { }
}

Beta 16及之前版本(2016-04-26)

管道接受一个包含所有参数的数组,所以你需要像这样调用它们:

new MyPipe().transform(myData, [arg1, arg2, arg3...])

你的变换函数是这样的

export class MyPipe implements PipeTransform {
transform(value:any, args:any[]):any {
var arg1 = args[0];
var arg2 = args[1];
...
}
}

你没有看到真正的管子。

\{\{ myData | date:'fullDate' }}

多个参数可以用“:”分隔。

\{\{ myData | myPipe:'arg1':'arg2':'arg3' }}

你也可以像这样连接管道:

\{\{ myData | date:'fullDate' | myPipe:'arg1':'arg2':'arg3' }}

因为β。参数不再作为数组传递给transform()方法,而是作为单独的参数:

\{\{ myData | date:'fullDate':'arg1':'arg2' }}




export class DatePipe implements PipeTransform {
transform(value:any, arg1:any, arg2:any):any {
...
}

https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta16-2016-04-26

管道现在接受可变数量的参数,而不是一个包含所有参数的数组。

我使用Angular 2+中的Pipes来过滤对象数组。下面的参数需要多个过滤器参数,但如果适合您的需要,您可以只发送一个。这是一个StackBlitz例子。它将找到您想要筛选的键,然后根据您提供的值进行筛选。它实际上很简单,如果它听起来复杂,它并不复杂,检查StackBlitz例子

这里是在*ngFor指令中调用的管道,

<div *ngFor='let item of items | filtermulti: [{title:"mr"},{last:"jacobs"}]' >
Hello \{\{item.first}} !
</div>

这是烟斗,

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


@Pipe({
name: 'filtermulti'
})
export class FiltermultiPipe implements PipeTransform {
transform(myobjects: Array<object>, args?: Array<object>): any {
if (args && Array.isArray(myobjects)) {
// copy all objects of original array into new array of objects
var returnobjects = myobjects;
// args are the compare oprators provided in the *ngFor directive
args.forEach(function (filterobj) {
let filterkey = Object.keys(filterobj)[0];
let filtervalue = filterobj[filterkey];
myobjects.forEach(function (objectToFilter) {
if (objectToFilter[filterkey] != filtervalue && filtervalue != "") {
// object didn't match a filter value so remove it from array via filter
returnobjects = returnobjects.filter(obj => obj !== objectToFilter);
}
})
});
// return new array of objects to *ngFor directive
return returnobjects;
}
}
}

这里是组件,包含要过滤的对象,

import { Component } from '@angular/core';
import { FiltermultiPipe } from './pipes/filtermulti.pipe';


@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
items = [{ title: "mr", first: "john", last: "jones" }
,{ title: "mr", first: "adrian", last: "jacobs" }
,{ title: "mr", first: "lou", last: "jones" }
,{ title: "ms", first: "linda", last: "hamilton" }
];
}

StackBlitz使用实例

GitHub示例:Fork这个示例的一个工作副本 . b0 GitHub示例

*请注意,在Gunter提供的答案中,Gunter声明数组不再用作过滤器接口,但我搜索了他提供的链接,并没有发现任何与这一说法相关的内容。同样,StackBlitz示例也显示了这段代码在Angular 6.1.9中正常工作。它将在Angular 2+中工作。

快乐编码:-)

扩展自:user3777549

一组数据上的多值过滤器(仅参考标题键)

超文本标记语言

<div *ngFor='let item of items | filtermulti: [{title:["mr","ms"]},{first:["john"]}]' >
Hello \{\{item.first}} !
</div>

filterMultiple

args.forEach(function (filterobj) {
console.log(filterobj)
let filterkey = Object.keys(filterobj)[0];
let filtervalue = filterobj[filterkey];
myobjects.forEach(function (objectToFilter) {


if (!filtervalue.some(x=>x==objectToFilter[filterkey]) && filtervalue != "") {
// object didn't match a filter value so remove it from array via filter
returnobjects = returnobjects.filter(obj => obj !== objectToFilter);
}
})
});

另外,伙计们,如果你像我一样遇到解析器错误,请记住管道名不应该包含破折号

@Pipe({ name: 'arrayFilter' }) // I had 'array-filter'
export class ArrayFilterPipe implements PipeTransform {
public transform(items: any[], value: string, props: string[]) { ... }
}

< em > 解析: *ngFor="let workflow of workflows | ***array-filter***: workflowFilter:['Name']; trackBy: trackWorkflow" < / p >

< em > 解析: *ngFor="let workflow of workflows | ***arrayFilter***: workflowFilter:['Name']; trackBy: trackWorkflow" < / p >