Birden çok bağımsız değişkeni olan Açısal 2 kanalını nasıl çağırırım?

Böyle bir boru diyebileceğimi biliyorum:

{{ myData | date:'fullDate' }}

Burada tarih borusu sadece bir argüman alır. Bileşenin şablon HTML'sinden ve doğrudan kodda daha fazla parametreli bir kanal çağırmak için sözdizimi nedir?

Bileşeninizin şablonunda, iki nokta üst üste ile ayırarak birden fazla bağımsız değişken kullanabilirsiniz:

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

Kodunuzdan şöyle görünecektir:

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

Ve borunuzun içindeki dönüşüm işlevinizde aşağıdaki gibi bağımsız değişkenleri kullanabilirsiniz:

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 ve öncesi (2016-04-26)

Borular tüm bağımsız değişkenleri içeren bir dizi alır, bu nedenle bunları şöyle çağırmanız gerekir:

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

Ve dönüşüm fonksiyonunuz şöyle görünecek:

export class MyPipe implements PipeTransform {    
    transform(value:any, args:any[]):any {
        var arg1 = args[0];
        var arg2 = args[1];
        ...
    }
}

Asıl boruyu kaçırıyorsunuz.

{{ myData | date:'fullDate' }}

Birden çok parametre iki nokta üst üste (:) ile ayrılabilir.

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

Ayrıca boruları zincirleyebilirsiniz, şöyle:

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

Beta.16'dan beri parametreler transform()artık yönteme dizi olarak değil, tek tek parametreler olarak iletilir :

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

borular artık tüm bağımsız değişkenleri içeren bir dizi değil, değişken sayıda bağımsız değişken alır.

Nesnelerin dizilerini filtrelemek için Açısal 2+'de Borular kullanıyorum. Aşağıdakiler birden fazla filtre bağımsız değişkeni alır, ancak bu gereksinimlerinize uygunsa yalnızca bir tane gönderebilirsiniz. İşte bir StackBlitz Örneği . Filtrelemek istediğiniz anahtarları bulur ve sonra sağladığınız değere göre filtreler. Aslında oldukça basit, eğer karmaşık görünüyorsa, StackBlitz Örneğine göz atın .

İşte Boru bir * ngFor yönergesinde çağrılıyor,

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

İşte Boru,

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

Ve burada filtrelenecek nesneyi içeren Bileşen,

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 Örneği

GitHub Örneği: Bu örneğin çalışma kopyasını buraya yerleştirin

*Lütfen aklınızda bulundurun Gunter tarafından verilen bir cevapta, Gunter dizilerin artık filtre arayüzleri olarak kullanılmadığını ancak sağladığı bağlantıyı aradığımı ve bu iddiayla konuşan hiçbir şey bulamadığını belirtti. Ayrıca, sağlanan StackBlitz örneği Açısal 6.1.9'da belirtildiği gibi çalışan bu kodu gösterir. Angular 2+ ile çalışacaktır.

Mutlu Kodlama :-)

Genişletilmiş: user3777549

Bir veri kümesinde çok değerli filtre (yalnızca başlık anahtarına referans)

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