使用“groupRows”分组显示 Ag-Grid Angular 中每个组的每列聚合

Question

我目前在 Angular 项目中使用 Ag-Grid 根据特定列对行进行分组。为此，我已将 groupDisplayType 设置为“groupRows”。

但是，我面临一个问题，我需要在 Ag-Grid 配置中显示每列每个组的聚合值。本质上，我想在组标题中显示聚合结果，如附图中的红色数字所示。

这是我正在使用的代码：Plunker 链接 https://plnkr.co/edit/XXr5Ys85QRGcRWBk?open=app%2Fapp.component.ts

对于实现此功能的任何帮助，我将不胜感激。预先感谢您！

Answer 1

这可以使用配置组单元渲染器方法来完成。

这是官方文档中的一个工作示例：https://plnkr.co/edit/?open=app%2Fapp.component.ts&preview

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { GroupCellRendererParams, IRowNode } from 'ag-grid-community';

interface GroupRowParams extends GroupCellRendererParams {
  flagCodes: Record<string, string>;
}

@Component({
  selector: 'group-row-cell',
  template: ` <div class="row">
    <img
      *ngIf="flagCode"
      class="flag"
      border="0"
      width="20"
      height="15"
      [src]="flagCodeImg"
    />
    <span class="groupTitle">{{ node.key }}</span>
    <span
      class="medal gold"
      attr.aria-label="{{ node.key }} - {{ node.aggData.gold }} gold medals"
      ><i class="fas fa-medal"></i>{{ node.aggData.gold }}</span
    >
    <span
      class="medal silver"
      attr.aria-label="{{ node.key }} - {{ node.aggData.silver }} silver medals"
      ><i class="fas fa-medal"></i>{{ node.aggData.silver }}</span
    >
    <span
      class="medal bronze"
      attr.aria-label="{{ node.key }} - {{ node.aggData.bronze }} bronze medals"
      ><i class="fas fa-medal"></i>{{ node.aggData.bronze }}</span
    >
  </div>`,
  styles: [
    `
      .row {
        display: inline-block;
      }

      .groupTitle {
        font-size: 16px;
        font-weight: bold;
      }

      .medal {
        margin: 0 5px;
      }

      .gold {
        color: #e4ab11;
      }

      .silver {
        color: #bbb4bb;
      }

      .bronze {
        color: #be9088;
      }

      .flag {
        margin: 0 4px;
        position: relative;
        top: 2px;
      }
    `,
  ],
})
export class GroupRowInnerRenderer implements ICellRendererAngularComp {
  public flagCodeImg!: string;
  public flagCode!: any;
  public node!: IRowNode;

  agInit(params: GroupRowParams): void {
    this.node = params.node;
    this.flagCode = params.flagCodes[params.node.key || ''];
    this.flagCodeImg = `https://flags.fmcdn.net/data/flags/mini/${this.flagCode}.png`;
  }

  refresh(): boolean {
    return false;
  }
}

可以调整示例以获得所需的结果