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

Question

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

{{ myData | date:'fullDate' }}

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

Answer 1

在您的组件模板中，您可以通过用冒号分隔它们来使用多个参数：

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

Answer 2

你错过了真正的管道。

{{ myData | date:'fullDate' }}

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

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

你也可以链接管道，像这样：

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

Answer 3

自 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

pipes now take a variable number of arguments, and not an array that contains all arguments.

Answer 4

我在 Angular 2+ 中使用 Pipes 来过滤对象数组。以下采用多个过滤器参数，但如果适合您的需要，您可以只发送一个。这里有一个StackBlitz Example. It will find the keys you want to filter by and then filters by the value you supply. It's actually quite simple, if it sounds complicated it's not, check out the StackBlitz Example。

这是在 *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 Example

GitHub Example: Fork a working copy of this example here

*请注意在 Gunter 提供的答案中，Gunter 声明数组不再用作过滤器接口，但我搜索了他提供的 link 并找到没有什么可以证明这一说法的。此外，提供的 StackBlitz 示例显示此代码在 Angular 6.1.9 中按预期工作。它适用于 Angular 2+.

快乐编码:-)

Answer 5

扩展自：

Multi-value过滤一组数据（仅参考title key）

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

Answer 6

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

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

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

How do I call an Angular 2 pipe with multiple arguments?

javascript

angular2-pipe

angular