angular - 计算角度 Infragistics Ui 网格中按行分组的总价值

问题描述

我在 typescript 12 中使用角度 Infragistics UI 网格

当网格处于分组模式时，我正在尝试计算价格字段的总和。假设我有 2 个客户组，第 1 组包含 2 个项目，第 2 组包含 3 个项目。我必须得到每个分组客户的总价（例如 group1 为 300，第二个为 800）。

这是我在 HTML 组件中的代码


<igx-grid #grid id="grid" [data]="listeinvoices" [groupingExpressions]='expr' [allowFiltering]="true"  [autoGenerate]="false" height="500px">

  <igx-column  field="client" header="client" [groupable]="true"></igx-column>
  <igx-column  field="price" header="price" [groupable]="true"></igx-column>

  <igx-column  field="invoicenumber" header="invoice nb" [groupable]="true"></igx-column>
</igx-grid>

ts组件的代码：

export class FactureComponent implements OnInit {

public expr: ISortingExpression[];

  @ViewChild("grid") public grid!: IgxGridComponent;


  constructor(private rest: RestService,private toastr: ToastrService,private excelExportService: IgxExcelExporterService) 
  {
    this.expr = [
      { dir: SortingDirection.Asc, fieldName: 'client', ignoreCase: false,
        strategy: DefaultSortingStrategy.instance() },
      
      ];
    }
}

标签： angulartypescriptinfragisticsignite-ui-angularigx-grid

在这种情况下，您可以使用Group Row 模板并根据需要构建它。查看文档，相信您会发现它很有帮助：

<ng-template igxGroupByRow let-groupRow>
    <div>
        <span>
        {{ groupRow.expression.fieldName }}:
        </span>
        <span>{{ isDate(groupRow.value) ? formatDate(groupRow.value) : groupRow.value }}</span>
        <igx-badge [value]="groupRow.records.length"></igx-badge>
        <span> Ordered in 2017:</span><span>{{ calc2017(groupRow.records)}}</span>
    </div>
</ng-template>

public calc2017(values: any[]) {
   const startDate = new Date('1/1/2017');
   const endDate = new Date('12/31/2017');

   return values.filter((x) => x.OrderDate >= startDate && x.OrderDate <= endDate).length;
}

您也可以定义自己的行选择器模板

<ng-template igxGroupByRowSelector let-groupByRowContext>
    {{ groupByRowContext.selectedCount }} / {{ groupByRowContext.totalCount  }}
</ng-template>

angular - 计算角度 Infragistics Ui 网格中按行分组的总价值

问题描述

解决方案

推荐阅读