একাধিক যুক্তি সহ আমি কৌনিক 2 পাইপটিকে কীভাবে কল করব?


204

আমি জানি আমি এইভাবে একটি পাইপ কল করতে পারি:

{{ myData | date:'fullDate' }}

এখানে তারিখের পাইপটি কেবল একটি যুক্তি নেয়। উপাদানগুলির টেমপ্লেট এইচটিএমএল থেকে সরাসরি কোডে আরও পরামিতিগুলির সাথে পাইপ কল করার সিনট্যাক্সটি কী?

উত্তর:


404

আপনার উপাদানগুলির টেমপ্লেটে আপনি একাধিক যুক্তি কলোন দিয়ে আলাদা করে ব্যবহার করতে পারেন:

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

8
এই নকশা নিরীহ। আমি নথিতে প্রত্যেক সময় আমি এই বিষয় জুড়ে আসা চেক করতে হবে
tom10271

কি would মত টেমপ্লেট বিট বর্ণন যদি arg1এবং arg2যেখানে উভয় ঐচ্ছিক এবং আপনি শুধুমাত্র মধ্যে পাস করতে চেয়েছিলেন arg2?
ফ্রিতেহিজ

আপনি যদি undefinedপ্রথম আর্গুমেন্ট হিসাবে পাস করেন তবে এটির ডিফল্ট মান পাবেন।
ইরান শাবী

3
আজকাল transform(value:any, arg1:any, arg2:any, arg3:any)বাকী অপারেটরটি ব্যবহার না করে আরও ভাল মনে হয় আমি মনে করি:transform(value:any, ...args:any[])
এমকেবি

কেন রূপান্তর (... আরগস) একটি ত্রুটির কারণ, তবে রূপান্তর (মান, ... আরগস) নয়?
শে

45

আপনি আসল পাইপ মিস করছেন।

{{ myData | date:'fullDate' }}

একাধিক পরামিতি একটি কোলন (:) দ্বারা পৃথক করা যায়।

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

এছাড়াও আপনি পাইপগুলি চেইন করতে পারেন:

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

25

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

পাইপগুলি এখন একটি পরিবর্তনশীল সংখ্যক আর্গুমেন্ট গ্রহণ করে এবং এমন কোনও অ্যারে নয় যাতে সমস্ত আর্গুমেন্ট রয়েছে।


কি would মত টেমপ্লেট বিট বর্ণন যদি arg1এবং arg2যেখানে উভয় ঐচ্ছিক এবং আপনি শুধুমাত্র মধ্যে পাস করতে চেয়েছিলেন arg2?
ফ্রিতেহিজ

আমরা কি ভিন্ন ভিন্ন ভেরিয়েবলের নাম ব্যবহার করতে পারি arg1? লাইক isFullDate। আমি কেবল জিজ্ঞাসা করছি কারণ প্রতিটি উদাহরণ এটি ব্যবহার করে।
সাবিতপোকার

'arg1'এবং 'arg2'কেবল স্ট্রিং লিটারেলগুলি পাইপের অতিরিক্ত পরামিতি হিসাবে পাস করা হয়। আপনি যে সুযোগে উপলভ্য যে কোনও মান বা রেফারেন্স ব্যবহার করতে পারেন (বর্তমান উপাদান উদাহরণ)
গন্টার জ্যাচবাউয়ার

1
@freethebees আপনি নাল পাস পেয়েছিলাম
karoluS

রূপান্তর পদ্ধতি অ্যারে আরগগুলি ভাল পয়েন্টটি সমর্থন করে না @ গুন্টার
বালস

5

আমি বস্তুগুলির অ্যারে ফিল্টার করতে কৌনিক 2+ তে পাইপ ব্যবহার করি। নিম্নলিখিতটিতে একাধিক ফিল্টার আর্গুমেন্ট লাগে তবে আপনার প্রয়োজন অনুসারে আপনি কেবলমাত্র একটিটি প্রেরণ করতে পারেন। এখানে একটি স্ট্যাকব্লিটজ উদাহরণ রয়েছে । এটি আপনি যে কীগুলি ফিল্টার করতে চান সেগুলি এবং তারপরে আপনার সরবরাহ করা মান অনুসারে ফিল্টার করবে। এটি আসলে বেশ সহজ, যদি এটি জটিল মনে হয় তবে এটি নয়, স্ট্যাকব্লিটজ উদাহরণটি দেখুন

পাইপকে এখানে * এনজিফোর্ডের নির্দেশিকায় ডাকা হচ্ছে,

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

স্ট্যাকব্লিটজ উদাহরণ

গিটহাব উদাহরণ: এই উদাহরণের একটি কার্যকরী অনুলিপি এখানে কাঁটাচামচ করুন

* দয়া করে নোট করুন যে গুনটারের দেওয়া জবাবে গুনটার জানিয়েছে যে অ্যারে আর ফিল্টার ইন্টারফেস হিসাবে ব্যবহার করা হয় না তবে আমি তার দেওয়া লিঙ্কটি অনুসন্ধান করেছিলাম এবং সেই দাবির সাথে কথা বলার মতো কিছুই পাইনি। এছাড়াও, সরবরাহ করা স্ট্যাকব্লিটজ উদাহরণটি এই কোডটি কৌনিক 6.1.9 হিসাবে লক্ষ্য হিসাবে কাজ করে দেখায়। এটি Angular 2+ এ কাজ করবে।

শুভ কোডিং :-)


সরাসরি পাইপে বহুবিধ প্যারামিটারগুলি পাস করার পরিবর্তে একাধিক এন্ট্রি সহ একক অ্যারে পাস করার কোনও মানে নেই।
ব্রুনোজেসিএম

অ্যারেতে বস্তু রয়েছে contains বস্তুগুলিতে গতিশীল ক্যোয়ারী তৈরি করতে ব্যবহৃত একাধিক কী মান জোড়া থাকতে পারে যেখানে আপনি কলামের সারি মানের সাথে তুলনা করে কলামের নাম ব্যবহার করে রেকর্ডের সন্ধান করতে পারেন। আপনি এই স্তরটি সিএসভি পরামিতিগুলি পেরিয়ে যাওয়ার গতিশীল জিজ্ঞাসা পাবেন না।
user3777549

-2

এর থেকে বাড়ানো হয়েছে: ইউজার 3777549

এক সেট ডেটাতে মাল্টি-ভ্যালু ফিল্টার (কেবল শিরোনাম কী সম্পর্কিত রেফারেন্স)

এইচটিএমএল

<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);
      }
    })
  });
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.