Javascript 按角度4中的多个列分组

我正在尝试按角度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;
}, {}));

---

从我的角度来看，最好的方法是使用lodash

HTML:-

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

---

我写了一个通用的typescript函数来分组，在这里它是通用的，可以按任意数量的键值分组，我想你可以把它变成一个管道。我添加了一个plunker让你看看它是如何工作的谢谢！我们如何获取验证组的计数？您所说的“验证组”是什么意思？对不起，我的意思是如何获取每个分组项目（从myArray）的计数？

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