Як мені викликати кутову 2 трубу з кількома аргументами?

Я знаю, що можу назвати трубу так:

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

Бета-версія 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

Тепер труби беруть змінну кількість аргументів, а не масив, який містить усі аргументи.

Я використовую Труби в кутовій 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: Виправте тут робочу копію цього прикладу

* Зверніть увагу, що у відповіді, наданій Gunter, Gunter зазначає, що масиви більше не використовуються як інтерфейси фільтру, але я шукав посилання, яке він надає, і не знайшов нічого, що говорить про це твердження. Також приклад StackBlitz надає цей код, який працює, як було передбачено у Angular 6.1.9. Він буде працювати в Angular 2+.

Щасливе кодування :-)

Розширено від: 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);
      }
    })
  });