Bagaimana cara saya memanggil pipa Angular 2 dengan banyak argumen?


205

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?

Jawaban:


405

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

8
Desain ini konyol. Saya perlu memeriksa dokumen setiap kali saya menemukan masalah ini
tom10271

Seperti apa bentuk bit template jika arg1dan di arg2mana keduanya opsional dan Anda hanya ingin melewatinya arg2?
freethebees

jika Anda lulus undefinedsebagai argumen pertama akan mendapatkan nilai standarnya.
Eran Shabi

3
saat ini daripada transform(value:any, arg1:any, arg2:any, arg3:any)menggunakan operator lain saya merasa lebih baik:transform(value:any, ...args:any[])
mkb

mengapa transform (... args) menyebabkan kesalahan, tetapi transform (value, ... args) tidak?
Sh eldeeb

45

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

25

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.


Seperti apa bentuk bit template jika arg1dan di arg2mana keduanya opsional dan Anda hanya ingin melewatinya arg2?
freethebees

Bisakah kita menggunakan nama variabel berbeda selain arg1? Seperti isFullDate. Saya hanya bertanya karena setiap contoh menggunakan ini.
sabithpocker

'arg1'dan 'arg2'hanya string literal yang dilewatkan sebagai parameter tambahan ke pipa. Anda dapat menggunakan nilai atau referensi apa pun yang tersedia pada lingkup itu (instance komponen saat ini)
Günter Zöchbauer

1
@freethebees kamu harus lulus null
karoluS

metode transform tidak mendukung argumen args good point @ Gunter
BALS

5

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 :-)


Tidak ada gunanya melewati array tunggal dengan banyak entri daripada melewati parameter multple langsung ke pipa.
BrunoJCM

Array berisi objek. Objek dapat berisi beberapa pasangan nilai kunci yang digunakan untuk membuat kueri dinamis di mana Anda dapat mencari catatan yang cocok menggunakan nama kolom dibandingkan dengan nilai baris kolom. Anda tidak akan mendapatkan tingkat kueri dinamis ini melalui parameter CSV.
user3777549

-2

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);
      }
    })
  });
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.