Как я могу назвать Angular 2 pipe с несколькими аргументами?

Ответ 1

В шаблоне компонента вы можете использовать несколько аргументов, разделив их на двоеточие:

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

Бета 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];
                ...
        }

Ответ 2

Вы пропускаете реальную трубу.

{{ myData | date:'fullDate' }}

Несколько параметров могут быть разделены двоеточием (:).

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

Также вы можете цепные трубы, вот так:

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

Ответ 3

Начиная с бета .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

Трубы

теперь принимают переменное количество аргументов, а не массив, содержащий все аргументы.

Ответ 4

Я использую Pipes in 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" }
  ];
}

Пример StackBlitz

Пример GitHub: здесь вы можете получить рабочую копию этого примера

* Обратите внимание, что в ответе Гантера Гунтер утверждает, что массивы больше не используются в качестве интерфейсов фильтров, но я искал ссылку, которую он предоставляет, и не нашел ничего, касающегося этого утверждения. Кроме того, в представленном примере StackBlitz этот код работает так, как задумано в Angular 6.1.9. Он будет работать в Angular 2+.

Удачного кодирования :-)

Ответ 5

Расширен от: 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);
      }
    })
  });