मैं कई तर्कों के साथ एक कोणीय 2 पाइप कैसे कह सकता हूं?

Question

मुझे पता है कि मैं एक पाइप को इस तरह कह सकता हूं:

{{ myData | date:'fullDate' }}

यहां डेट पाइप केवल एक तर्क लेता है। घटक के टेम्पलेट HTML से और सीधे कोड में, अधिक मापदंडों के साथ एक पाइप को कॉल करने के लिए वाक्यविन्यास क्या है?

Answer 1

अपने घटक के टेम्प्लेट में आप उन्हें कॉलन के साथ अलग करके कई तर्कों का उपयोग कर सकते हैं:

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

Comments

यह डिजाइन मूर्खतापूर्ण है। मुझे हर बार इस मुद्दे पर आने वाले दस्तावेज़ की जांच करने की आवश्यकता है

— 2:10 बजे tom10271

यदि arg1और arg2जहां दोनों वैकल्पिक हो और आप केवल पास करना चाहते हैं तो टेम्पलेट बिट कैसा दिखेगा arg2?

— 12:18

यदि आप undefinedपहले तर्क के रूप में पास करते हैं, तो उसे इसका डिफ़ॉल्ट मान मिलेगा।

— एरन शाबी

आजकल के बजाय transform(value:any, arg1:any, arg2:any, arg3:any)बाकी ऑपरेटर का उपयोग करना बेहतर लगता है मुझे लगता है:transform(value:any, ...args:any[])

— mkb

क्यों रूपांतरण (... args) एक त्रुटि का कारण बनता है, लेकिन रूपांतरण (मान, ... args) नहीं?

— श् ईल्डिब

Answer 2

आप वास्तविक पाइप को याद कर रहे हैं।

{{ myData | date:'fullDate' }}

कई मापदंडों को एक बृहदान्त्र (:) द्वारा अलग किया जा सकता है।

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

इसके अलावा, आप पाइप को चेन कर सकते हैं, जैसे:

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

Answer 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

पाइप अब तर्कों की एक परिवर्तनीय संख्या लेते हैं, और एक ऐसा सरणी नहीं जिसमें सभी तर्क होते हैं।

Comments

यदि arg1और arg2जहां दोनों वैकल्पिक हो और आप केवल पास करना चाहते हैं तो टेम्पलेट बिट कैसा दिखेगा arg2?

— 12:18

क्या हम इसके अलावा अन्य भिन्न नामों का उपयोग कर सकते हैं arg1? की तरह isFullDate। मैं सिर्फ इसलिए पूछ रहा हूं क्योंकि हर उदाहरण इसका उपयोग करता है।

— सबथपॉकर

'arg1'और 'arg2'पाइप के अतिरिक्त मापदंडों के रूप में पारित स्ट्रिंग स्ट्रिंग शाब्दिक हैं। आप उस मान पर उपलब्ध किसी भी मान या संदर्भ का उपयोग कर सकते हैं (वर्तमान घटक उदाहरण)

— गुंटर ज़ोचाउर

@freethebees आपको null

— karoluS

ट्रांसफ़ॉर्मिंग विधि समर्थन नहीं करती है सरणी अच्छी बात @Gunter

— BALS

Answer 4

मैं ऑब्जेक्ट्स के सरणियों को फ़िल्टर करने के लिए कोणीय 2+ में पाइप का उपयोग करता हूं। निम्नलिखित कई फ़िल्टर तर्क लेता है, लेकिन आप केवल एक भेज सकते हैं यदि वह आपकी आवश्यकताओं के अनुरूप हो। यहाँ एक StackBlitz उदाहरण है । यह उन कुंजियों को खोजेगा जिन्हें आप फ़िल्टर करना चाहते हैं और फिर आपके द्वारा आपूर्ति किए गए मूल्य से फ़िल्टर करते हैं। यह वास्तव में काफी सरल है, अगर यह जटिल लगता है तो यह नहीं है, StackBlitz उदाहरण देखें ।

यहाँ पाइप को * एनफोर डायरेक्टिव में कहा जा रहा है,

<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 उदाहरण प्रदान करता है कि यह कोड कोणीय 6.1.9 में इरादा के अनुसार काम करता है। यह Angular 2+ में काम करेगा।

हैप्पी कोडिंग :-)

Comments

मल्टीपल मापदंडों को सीधे पाइप में पारित करने के बजाय कई प्रविष्टियों के साथ एक सरणी को पारित करने का कोई मतलब नहीं है।

— ब्रूनो जेसीएम

सरणी में ऑब्जेक्ट हैं। ऑब्जेक्ट में डायनेमिक क्वेरीज़ बनाने के लिए उपयोग किए जाने वाले कई महत्वपूर्ण मान जोड़े हो सकते हैं, जहाँ आप कॉलम के पंक्ति मानों की तुलना में कॉलम नामों का उपयोग करके मिलान रिकॉर्ड देख सकते हैं। आपको CSV मापदंडों को पार करने वाली डायनामिक क्वेरी का यह स्तर नहीं मिलेगा।

— user3777549

Answer 5

से विस्तारित: user3777549

डेटा के एक सेट पर बहु-मूल्य फ़िल्टर (केवल शीर्षक कुंजी के संदर्भ में)

एचटीएमएल

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