Bagaimana cara saya memanggil pipa Angular 2 dengan banyak argumen?

Saya tahu saya bisa memanggil pipa seperti ini:

{{ myData | date:'fullDate' }}

Di sini pipa tanggal hanya membutuhkan satu argumen. Apa sintaksis untuk memanggil pipa dengan lebih banyak parameter, dari HTML templat komponen dan langsung dalam kode?

Dalam templat komponen Anda, Anda dapat menggunakan beberapa argumen dengan memisahkannya dengan titik dua:

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

Dari kode Anda akan terlihat seperti ini:

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

Dan dalam fungsi transformasi Anda di dalam pipa Anda, Anda dapat menggunakan argumen seperti ini:

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 dan sebelumnya (2016-04-26)

Pipes mengambil array yang berisi semua argumen, jadi Anda harus memanggilnya seperti ini:

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

Dan fungsi transformasi Anda akan terlihat seperti ini:

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

Anda melewatkan pipa yang sebenarnya.

{{ myData | date:'fullDate' }}

Beberapa parameter dapat dipisahkan dengan titik dua (:).

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

Anda juga dapat membuat rantai pipa, seperti:

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

Sejak beta.16 parameter tidak lagi dilewatkan sebagai array ke transform()metode tetapi sebagai parameter individual:

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

pipa sekarang mengambil sejumlah variabel argumen, dan bukan array yang berisi semua argumen.

Saya menggunakan Pipes di Angular 2+ untuk memfilter array objek. Berikut ini membutuhkan beberapa argumen filter tetapi Anda hanya dapat mengirim satu jika itu sesuai dengan kebutuhan Anda. Berikut adalah Contoh StackBlitz . Ini akan menemukan kunci yang ingin Anda filter dan kemudian filter dengan nilai yang Anda berikan. Ini sebenarnya cukup sederhana, jika kedengarannya rumit bukan, lihat Contoh StackBlitz .

Berikut adalah Pipa yang dipanggil dalam arahan * ngFor,

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

Ini Pipanya,

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

Dan di sini adalah Komponen yang berisi objek untuk disaring,

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

Contoh StackBlitz

Contoh GitHub: Garpu salinan yang berfungsi dari contoh ini di sini

* Harap dicatat bahwa dalam jawaban yang diberikan oleh Gunter, Gunter menyatakan bahwa array tidak lagi digunakan sebagai antarmuka filter, tetapi saya mencari tautan yang disediakannya dan tidak menemukan apa pun yang berbicara dengan klaim itu. Juga, contoh StackBlitz yang diberikan menunjukkan kode ini berfungsi sebagaimana dimaksud dalam Angular 6.1.9. Ini akan bekerja di Angular 2+.

Selamat Coding :-)

Diperpanjang dari: user3777549

Filter multi-nilai pada satu set data (referensi untuk kunci judul saja)

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