代码之家 › 专栏 › 技术社区 › CGFoX

使用*ngFor对角度材质中的对象数组进行分组

group-by loops angular javascript

CGFoX · 技术社区 · 6 年前

this related question , , e.g., by team name

[
 {name: 'Gene', team: 'team alpha'},
 {name: 'George', team: 'team beta'},
 {name: 'Steve', team: 'team gamma'},
 {name: 'Paula', team: 'team beta'},
 {name: 'Scruath of the 5th sector', team: 'team gamma'}
];

accepted answer 使用 ng-repeat 用一个 groupBy 我想要多个扩展面板,每个团队一个,当扩展时,显示参与的玩家。

<mat-expansion-panel ng-repeat="(key, value) in players | groupBy: 'team'">
    <mat-expansion-panel-header>
      <mat-panel-title>{{ key }}</mat-panel-title>
    </mat-expansion-panel-header>
    <li ng-repeat="player in value">
      {{player.name}}
    </li>
</mat-expansion-panel>

ng重复 不允许进入 mat-expansion-panel *ngFor 是允许的,但我不知道怎么和过滤器。 *ngFor="let player in players | groupBy: 'team'"

1 回复 | 直到 6 年前

Sajeetharan 6 年前

你应该自己做 custom pipe ngFor .

你的定制烟斗应该看起来像,

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'groupBy'})
export class GroupByPipe implements PipeTransform {
    transform(collection: Array<any>, property: string): Array<any> {
         if(!collection) {
            return null;
        }

        const groupedCollection = collection.reduce((previous, current)=> {
            if(!previous[current[property]]) {
                previous[current[property]] = [current];
            } else {
                previous[current[property]].push(current);
            }

            return previous;
        }, {});

        return Object.keys(groupedCollection).map(key => ({ key, value: groupedCollection[key] }));
    }
}

STACKBLITZ DEMO

推荐文章

Keren · 如何使变量大1

1 年前

smg_08 · 使用for循环在pandas数据帧中进行筛选[重复]

1 年前

stats_noob · R: 记录某个“行为”发生的循环的索引?

2 年前

nickolakis · 基于R中的列名复制列

2 年前

khalid Morrshid · 循环语法C语言

2 年前

Onur · R中矩阵的循环

2 年前

Alex · 如何向嵌套字典json添加值?

2 年前

George carrick · 如何在R中检测时间序列数据中的缺失年份?

2 年前

CS Geek · 如何实现一个循环,其中:数字不能在输入的中间使用;他们最后一定要来?

2 年前

Klang · 我怎么做我自己的绳子。Split()和数组。Reverse()一个用户定义函数中的内置函数,用于反转给定字符串?

2 年前