我知道我可以像这样调用管道:
{{ myData | date:'fullDate' }}
在这里,日期管道仅接受一个参数。从组件的模板HTML并直接在代码中调用具有更多参数的管道的语法是什么?
我知道我可以像这样调用管道:
{{ myData | date:'fullDate' }}
在这里,日期管道仅接受一个参数。从组件的模板HTML并直接在代码中调用具有更多参数的管道的语法是什么?
Answers:
在组件的模板中,可以使用多个参数,以冒号分隔它们:
{{ myData | myPipe: 'arg1':'arg2':'arg3'... }}
从您的代码中,它将看起来像这样:
new MyPipe().transform(myData, arg1, arg2, arg3)
在管道内的转换函数中,您可以使用如下参数:
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];
...
}
}
arg1
和arg2
其中两个可选的,你只想要传递arg2
?
undefined
作为第一个参数传递,它将获得其默认值。
transform(value:any, arg1:any, arg2:any, arg3:any)
使用rest运算符,而是感觉更好:transform(value:any, ...args:any[])
从beta.16开始,参数不再作为数组传递给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
管道现在接受可变数量的参数,而不是包含所有参数的数组。
arg1
和arg2
其中两个可选的,你只想要传递arg2
?
arg1
吗?像isFullDate
。我之所以问是因为每个示例都使用此方法。
'arg1'
并且'arg2'
只是作为附加参数传递给管道的字符串文字。你可以使用任何值或引用,可在该范围(当前组件实例)
我在Angular 2+中使用Pipes过滤对象数组。以下内容采用了多个过滤器参数,但如果适合您,则只能发送一个。这是一个StackBlitz示例。它将找到您要过滤的键,然后根据您提供的值进行过滤。实际上,这很简单,如果听起来很复杂,那么请查看StackBlitz Example。
这是在* ngFor指令中调用的Pipe,
<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;
}
}
}
这是包含要过滤的对象的Component,
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" }
];
}
*请注意,在Gunter提供的答案中,Gunter声明不再将数组用作过滤器接口,但我搜索了他提供的链接,但没有发现与该声明有关的内容。另外,提供的StackBlitz示例显示了此代码按Angular 6.1.9的预期工作。它将在Angular 2+中运行。
快乐编码:-)
扩展自:user3777549
一组数据上的多值过滤器(仅引用标题键)
的HTML
<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);
}
})
});