如何调用具有多个参数的 Angular 2 管道
How do I call an Angular 2 pipe with multiple arguments?
我知道我可以像这样调用管道:
{{ myData | date:'fullDate' }}
在这里,日期管道只接受一个参数。从组件的模板 HTML 和直接在代码中调用具有更多参数的管道的语法是什么?
在组件的模板中,您可以通过用冒号分隔来使用多个参数:
{{ 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];
...
}
}
你缺少实际的管道。
{{ myData | date:'fullDate' }}
多个参数可以用冒号 (:).
{{ myData | myPipe:'arg1':'arg2':'arg3' }}
您也可以链接管道,如下所示:
{{ myData | date:'fullDate' | myPipe:'arg1':'arg2':'arg3' }}
自 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
管道现在采用可变数量的参数,而不是包含所有参数的数组。
我在 Angular 2+ 中使用管道来过滤对象数组。以下内容采用多个筛选器参数,但如果符合您的需求,您可以只发送一个。这是一个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" }
];
}
堆栈闪电战示例
GitHub 示例:在此处分叉此示例的工作副本
*请注意,在 Gunter 提供的回答中,Gunter 指出数组不再用作过滤器接口,但我搜索了他提供的链接,发现没有任何内容与该说法有关。此外,提供的 StackBlitz 示例显示此代码在 Angular 6.1.9 中按预期工作。它将在 Angular 2+ 中工作。
快乐编码:-)
另外,伙计们,如果您像我一样遇到解析器错误,请记住管道名称不应包含破折号。
@Pipe({ name: 'arrayFilter' }) // I had 'array-filter'
export class ArrayFilterPipe implements PipeTransform {
public transform(items: any[], value: string, props: string[]) { ... }
}
未解析: *ngFor="let workflow of workflows | ***array-filter***: workflowFilter:['Name']; trackBy: trackWorkflow"
解析: *ngFor="let workflow of workflows | ***arrayFilter***: workflowFilter:['Name']; trackBy: trackWorkflow"
扩展自 : user3777549
对一组数据进行多值筛选(仅引用标题键)
.HTML
<div *ngFor='let item of items | filtermulti: [{title:["mr","ms"]},{first:["john"]}]' >
Hello {{item.first}} !
</div>
过滤多个
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);
}
})
});
- 如何使用skip参数使用angular ui引导进行服务器端分页
- angular.js:13424错误:[ng:areq]参数'fn'不是函数,getObject
- 删除处于抽象状态的参数angular
- 使用应用程序状态js和视图在angular js url上传递两个参数
- 角度限制过滤器's的第二参数“s”;“开始”;在Angular 1.3中似乎不起作用
- Angular 2:如何在 GET 和 POST 请求中设置 double、float、int 和布尔类型参数
- 如何调用具有多个参数的 Angular 2 管道
- 对 Angular UI 路由器使用多个正则表达式参数
- 访问谷歌登录函数 Angular 2 中的构造函数参数
- 使用Angular Resource查询具有字符串参数的REST API
- Angular 2:HTTP Post Request,带有URL参数和正文类型参数
- Angular.js:13424错误:[ng:areq]参数'enfermerosController'
- 如何停止Angular UI路由器将可选参数从一个路由传递到完全不同的路由
- 在angular 2中向http get请求传递url参数
- 在Angular Directive中传递函数作为参数不会;不起作用
- Angular UI路由器:UI不使用参数构建href
- 基于参数(angular)调用特定元素上的ng show
- 如何在Angular中缓存http直到参数更改
- 带有外部参数 Angular 的 Ajax
- Javascript,对象,用参数传递函数作为参数- angular, jquery概念基本误区