angular - tutorial - অ্যাঙ্গুলার 2 তে কীভাবে ডেটা গ্রুপ করবেন?




angular 7 tutorial (2)

আপনি এনজিএক্স-পাইপ ব্যবহার করতে পারেন https://github.com/danrevah/ngx-pipes#groupby

this.arrayObject = [
  {id: 1, elm: 'foo', value: 0}, 
  {id: 2, elm: 'bar', value: 1}, 
  {id: 3, elm: 'foo', value: 2}, 
  {id: 4, elm: 'foo', value: 2}
];

this.arrayNestedObject = [
  {id: 1, prop: { deep: 'foo' }},
  {id: 2, prop: { deep: 'bar' }},
  {id: 3, prop: { deep: 'foo' }},
  {id: 4, prop: { deep: 'bar' }}
];
<p>{{ arrayObject | groupBy: 'elm' }}</p> 
<!-- Output: "{foo: [{id: 1, elm: 'foo', value: 0}, {id: 3, elm: 'foo', value: 2}, {id: 4, elm: 'foo', value: 2}], bar: [{id: 2, elm: 'bar', value: 1}]}" -->

https://code.i-harness.com

টাইপস্ক্রিপ্টের সাহায্যে আমি কৌনিক 2 তে কীভাবে ডেটা গ্রুপ করব। আমি সচেতন যে এটি কৌণিক 1.X এ "গ্রুপ বাই" ফিল্টার ব্যবহার করে সম্পন্ন হয়েছে, তবে কৌণিক 2 তে কীভাবে ডেটা গ্রুপ করবেন তা পাচ্ছেন না আমার কাছে এই অ্যারেটি রয়েছে:

import {Employee} from './employee';
        export var employees: Employee[];
        employees = [
            { id: 1, firstName: "John", lastName: "Sonmez", department: 1, age: 24, address: "24/7, Working hours apartment, Cal. US", contactNumber: "+968546215789" },
            { id: 2, firstName: "Mark", lastName: "Seaman", department: 2, age: 25, address: "32-C, Happy apartments, Block-9C, Cal. US", contactNumber: "+968754216984" },
            { id: 3, firstName: "Jamie", lastName: "King", department: 3, age: 32, address: "54/II, Glorydale apartment, Cal. US", contactNumber: "+967421896326" },

            { id: 5, firstName: "Jacob", lastName: "Ridley", department: 5, age: 24, address: "24/7, Working hours apartment, Cal. US", contactNumber: "+968546215789" },
            { id: 6, firstName: "Peter", lastName: "Parker", department: 3, age: 25, address: "32-C, Happy apartments, Block-9C, Cal. US", contactNumber: "+968754216984" },
            { id: 7, firstName: "Martin", lastName: "Luther", department: 4, age: 32, address: "54/II, Glorydale apartment, Cal. US", contactNumber: "+967421896326" },
            { id: 8, firstName: "Raghav", lastName: "Kumar", department: 1, age: 34, address: "51/C Shivalik, Cal. US", contactNumber: "+967842569842" },

            { id: 9, firstName: "Narayan", lastName: "Sonmez", department: 3, age: 24, address: "24/7, Working hours apartment, Cal. US", contactNumber: "+968546215789" },
            { id: 10, firstName: "Russell", lastName: "Andre", department: 2, age: 25, address: "32-C, Happy apartments, Block-9C, Cal. US", contactNumber: "+968754216984" },
            { id: 11, firstName: "Ramona", lastName: "King", department: 4, age: 32, address: "54/II, Glorydale apartment, Cal. US", contactNumber: "+967421896326" },
            { id: 12, firstName: "Andre", lastName: "Russell", department: 1, age: 34, address: "51/C Shivalik, Cal. US", contactNumber: "+967842569842" },

            { id: 13, firstName: "Nathan", lastName: "Leon", department: 1, age: 24, address: "24/7, Working hours apartment, Cal. US", contactNumber: "+968546215789" },
            { id: 14, firstName: "Brett", lastName: "Lee", department: 5, age: 25, address: "32-C, Happy apartments, Block-9C, Cal. US", contactNumber: "+968754216984" },
            { id: 15, firstName: "Tim", lastName: "Cook", department: 2, age: 32, address: "54/II, Glorydale apartment, Cal. US", contactNumber: "+967421896326" },
            { id: 16, firstName: "Steve", lastName: "Jobs", department: 5, age: 34, address: "51/C Shivalik, Cal. US", contactNumber: "+967842569842" }
        ];

এবং আমি বিভাগ দ্বারা কর্মীদের গণনা খুঁজছি, মত

বিভাগ 1 এর 4 জন কর্মচারী রয়েছে

ইত্যাদি।

প্রকৃত বিভাগের সাথে বিভাগ আইডিতে যোগদান করা (যাতে আমি বিভাগের নাম পেতে পারি) আমার আরও একটি গল্প বের করতে হবে।


আপনি নীচের বর্ণিত হিসাবে এটি করতে কাস্টম পাইপ ব্যবহার করতে পারেন:

@Pipe({name: 'groupBy'})
export class GroupByPipe implements PipeTransform {
  transform(value: Array<any>, field: string): Array<any> {
    const groupedObj = value.reduce((prev, cur)=> {
      if(!prev[cur[field]]) {
        prev[cur[field]] = [cur];
      } else {
        prev[cur[field]].push(cur);
      }
      return prev;
    }, {});
    return Object.keys(groupedObj).map(key => ({ key, value: groupedObj[key] }));
  }
}

এবং তারপরে আপনার টেম্পলেটটিতে আপনি লিখতে পারেন:

<div *ngFor="let item of employees | groupBy:'department'">
  Department {{ item.key }} has {{ item.value.length }} employees
</div>

সম্পর্কিত প্লঙ্কার https://plnkr.co/edit/cLnlH13IH4WAsuRdol4n?p=preview পূর্বরূপ দেখুন

আশা করি এটি আপনাকে সাহায্য করবে!







typescript1.7