جاوااسکریپت - گروهبندی بر اساس چند ستون در انگولار ۴

من در حال تلاش برای گروهبندی بر اساس آرایه در انگولار ۴ هستم. من از روش پایپ اختصاصی برای گروهبندی بر اساس آرایه استفاده میکنم همانطور که در آن یافت شده است:

https://www.competa.com/blog/custom-groupby-pipe-angular-4/

اما من تلاش میکنم که بر اساس چندین ستون گروهبندی کنم.

دادهها

var myArray = [
    {
        name: "Apple",
        color: "Green",
        grade: "A1"
    },
    {
        name: "Apple",
        color: "Red",
        grade: "A1"
    },
    {
        name: "Apple",
        color: "Green",
        grade: "A2"
    },
    {
        name: "Apple",
        color: "Red",
        grade: "A2"
    },
];

اینجا من میخواهم بر اساس چند ستون مانند نام و نمره گروهبندی کنم.

من سعی کردم از این روش استفاده کنم اما هیچ کمکی نکرد:

<li *ngFor="let object of myArray | groupBy:'name,grade'"></li>

لطفاً راهحلهای ارزشمند خود را برای حل این مشکل ارائه دهید. از کمک شما قدردانی میکنم. متشکرم.

پاسخ شماره ۱

شما میتوانید آرایه خود را در کامپوننت با استفاده از تابع reduce گروهبندی کنید :

groups = Object.values(this.myArray.reduce(function(r, e) {
      var key = e.name + '|' + e.grade;
      if (!r[key]) r[key] = e;
      else {
        r[key].color = e.color;
      }
      return r;
}, {}));

https://jsfiddle.net/ov4nx7ad/

پاسخ شماره ۲

از نظر من بهترین راه استفاده از lodash است.

اچتیامال:-

<ul>
    <li *ngFor="let object of myArray | groupBy:['color','name']"></li>
</ul>

لوله:-

import { Pipe, PipeTransform } from '@angular/core';
import * as _ from 'lodash';

@Pipe({name: 'groupBy'})
export class GroupByPipe implements PipeTransform {
    transform(collection: Array, property: Array): Array {

        if(!collection) {
            return null;
        }
        var notNull = _.negate(_.isNull);
        const groupedCollection = _.groupBy(collection, function(note){
                          return _.find(_.pick(note, property), notNull);
        });
        return Object.keys(groupedCollection).map(key => ({ key, value: groupedCollection[key] }));
    }
}