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

时间:2016-04-23 21:41:45

标签: javascript angular angular2-pipe

我知道我可以这样称呼管道:

{{ myData | date:'fullDate' }}

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

6 个答案:

答案 0 :(得分:280)

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

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

从您的代码中看起来像这样:

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

在管道内的转换函数中,您可以使用如下参数:

export class MyPipe implements PipeTransform {    
    transform(value:any, arg1:any, arg2:any, arg3:any):any {
}

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

Pipes采用包含所有参数的数组,因此您需要像这样调用它们:

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];
                ...
        }

答案 1 :(得分:28)

你错过了实际的管道。

let action = SKAction.rotateByAngle(CGFloat(M_PI), duration:5)
sprite.runAction(action)

多个参数可以用冒号(:)分隔。

{{ myData | date:'fullDate' }}

你也可以链管,如下:

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

答案 2 :(得分:20)

自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

  

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

答案 3 :(得分:5)

我使用Angular 2+中的Pipes来过滤对象数组。以下是多个过滤器参数,但如果符合您的需要,您只能发送一个。这是一个StackBlitz Example。它会找到您要过滤的键,然后按您提供的值进行过滤。它实际上非常简单,如果它听起来很复杂,那么请查看StackBlitz Example

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

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

这是Pipe,

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 Example

GitHub Example: Fork a working copy of this example here

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

快乐编码: - )

答案 4 :(得分:0)

扩展自:user3777549

对一组数据进行多值过滤(仅引用标题键)

HTML

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);
      }
    })
  });

filterMultiple

{{1}}

答案 5 :(得分:0)

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

@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"