如何使用多个参数调用 Angular 2 管道?

IT技术 javascript angular angular2-pipe
2021-02-06 05:17:20

我知道我可以这样调用管道:

{{ myData | date:'fullDate' }}

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

6个回答

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

{{ 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];
        ...
    }
}
现在transform(value:any, arg1:any, arg2:any, arg3:any)我认为,而不是使用 rest 运算符感觉更好:transform(value:any, ...args:any[])
2021-03-18 05:17:20
这个设计很傻。每次遇到这个问题我都需要检查文档
2021-03-22 05:17:20
如果arg1arg2where 都是可选的并且您只想传入,模板位会是什么样子arg2
2021-03-26 05:17:20
为什么 transform(...args) 会导致错误,而 transform(value, ...args) 不会?
2021-03-31 05:17:20
如果您undefined作为第一个参数传递,它将获得其默认值。
2021-04-04 05:17:20

你错过了实际的管道。

{{ 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

管道现在采用可变数量的参数,而不是包含所有参数的数组。

'arg1'并且'arg2'只是作为附加参数传递给管道的字符串文字。您可以使用在该范围内可用的任何值或引用(当前组件实例)
2021-03-17 05:17:20
我们可以使用不同的变量名arg1吗?喜欢isFullDate我只是问,因为每个例子都使用这个。
2021-03-22 05:17:20
转换方法不支持数组参数@Gunter
2021-03-24 05:17:20
如果arg1arg2where 都是可选的并且您只想传入,模板位会是什么样子arg2
2021-03-26 05:17:20
@freethebees 你必须通过 null
2021-04-08 05:17:20

我在 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 此示例的工作副本

*请注意,在 Gunter 提供的答案中,Gunter 指出数组不再用作过滤器接口,但我搜索了他提供的链接,但没有发现任何与该声明相关的内容。此外,提供的 StackBlitz 示例显示此代码在 Angular 6.1.9 中按预期工作。它将在 Angular 2+ 中工作。

快乐编码:-)

该数组包含对象。这些对象可以包含多个键值对,用于创建动态查询,您可以在其中使用列名称与列的行值进行比较来查找匹配的记录。您不会获得这种级别的动态查询传递 CSV 参数。
2021-03-28 05:17:20
传递具有多个条目的单个数组而不是将多个参数直接传递给管道是没有意义的。
2021-04-13 05:17:20

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

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

未解析: *ngFor="let 工作流工作流 | array-filter : workflowFilter:['Name']; trackBy: trackWorkflow"

解析: *ngFor="let 工作流工作流 | arrayFilter : workflowFilter:['Name']; trackBy: trackWorkflow"