উত্তর:
আপনার উপাদানগুলির টেমপ্লেটে আপনি একাধিক যুক্তি কলোন দিয়ে আলাদা করে ব্যবহার করতে পারেন:
{{ 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];
...
}
}
arg1
এবং arg2
যেখানে উভয় ঐচ্ছিক এবং আপনি শুধুমাত্র মধ্যে পাস করতে চেয়েছিলেন arg2
?
undefined
প্রথম আর্গুমেন্ট হিসাবে পাস করেন তবে এটির ডিফল্ট মান পাবেন।
transform(value:any, arg1:any, arg2:any, arg3:any)
বাকী অপারেটরটি ব্যবহার না করে আরও ভাল মনে হয় আমি মনে করি:transform(value:any, ...args:any[])
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
পাইপগুলি এখন একটি পরিবর্তনশীল সংখ্যক আর্গুমেন্ট গ্রহণ করে এবং এমন কোনও অ্যারে নয় যাতে সমস্ত আর্গুমেন্ট রয়েছে।
arg1
এবং arg2
যেখানে উভয় ঐচ্ছিক এবং আপনি শুধুমাত্র মধ্যে পাস করতে চেয়েছিলেন arg2
?
arg1
? লাইক isFullDate
। আমি কেবল জিজ্ঞাসা করছি কারণ প্রতিটি উদাহরণ এটি ব্যবহার করে।
'arg1'
এবং 'arg2'
কেবল স্ট্রিং লিটারেলগুলি পাইপের অতিরিক্ত পরামিতি হিসাবে পাস করা হয়। আপনি যে সুযোগে উপলভ্য যে কোনও মান বা রেফারেন্স ব্যবহার করতে পারেন (বর্তমান উপাদান উদাহরণ)
আমি বস্তুগুলির অ্যারে ফিল্টার করতে কৌনিক 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+ এ কাজ করবে।
শুভ কোডিং :-)
এর থেকে বাড়ানো হয়েছে: ইউজার 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);
}
})
});