Question

我正在寻找像

这样的事情

JS

$scope.players = [
  {name: 'Gene', team: 'alpha'},
  {name: 'George', team: 'beta'},
  {name: 'Steve', team: 'gamma'},
  {name: 'Paula', team: 'beta'},
  {name: 'Scruath', team: 'gamma'}
];

HTML：

<ul repeat.for="obj of players | groupBy: 'team'">
  Group name: ${obj.group}
  <li repeat.for="player of obj.values">
    player: ${player.name} 
  </li>
</ul>

有可能吗？或者以Aurelia方式做这种逻辑的更好方法是什么？

Answer 1

您可以使用ValueConverter执行此操作。

export class GroupByValueConverter {
    toView(array, groupBy) {

        var groups = {};

        array.forEach(function (o) {
            var group = o[groupBy];
            groups[group] = groups[group] || [];
            groups[group].push(o);
        });

        return Object.keys(groups).map(function (group) {
            return {
                group: group,
                values: groups[group]
            };
        })
    }
}

Answer 2

找到这个答案后，我的方式略有不同。我没有使用带有group和value键的对象数组，而是使用Map。

更新了视图

<ul repeat.for="[group, values] of players | groupBy:'team'">
  Group name: ${group}
  <li repeat.for="player of values">
    player: ${player.name} 
  </li>
</ul>

对于价值转换器，我使用this answer获得灵感，以便通过操作执行分组。

价值转换器

export class GroupByValueConverter {
  toView(objects, key) {
    return objects.reduce(
      (rv, x) => rv.set(x[key], (rv.get(x[key]) || []).concat(x)), 
      new Map()
    ); 
  }
}

Answer 3

以上ValueConverter的扩展，允许使用具有嵌套对象属性的分组过滤器（例如groupBy：'team.id'）

export class GroupByValueConverter {
    toView(array, groupBy) {

        var groups = {};
        var props = groupBy.split(".");

        array.forEach(function (o) {
            var group = o;
            props.forEach(function (p) { group = group[p] });
            groups[group] = groups[group] || [];
            groups[group].push(o);
        });

        return Object.keys(groups).map(function (group) {
            return {
                group: group,
                values: groups[group],
            };
        })
    }
}

另一个允许指定为对象组的扩展。它需要第二个参数来指定要用作索引器的对象键。

例如。 - | GROUPBY： '团队'： '身份证' - | GROUPBY： 'projectMember.team'： '编号'

export class GroupByValueConverter {
    toView(array, groupBy, groupByKey) {

        var groups = {};
        var groupMembers = {};
        var props = groupBy.split(".");

        array.forEach(function (o) {
            var group = o;
            props.forEach(function (p) { group = group[p] });
            var index = groupByKey && group ? group[groupByKey] : group;
            groups[index] = group;
            groupMembers[index] = groupMembers[index] || [];
            groupMembers[index].push(o);
        });

        return Object.keys(groups).map(function (index) {
            return {
                group: groups[index],
                values: groupMembers[index],
            };
        })
    }
}

如何在Aurelia中按过滤器进行分组

3 个答案: