kendo-grid Angular 的页脚

Question

在查找剑道网格角度的页脚总和时需要帮助。

<kendo-grid [data]="gridData">
    <ng-template ngFor [ngForOf]="columns" let-column>
      <kendo-grid-column field="{{column}}">
          <ng-template kendoGridFooterTemplate>
             {{aggregate[column.value].sum}}
          </ng-template>
      </kendo-grid-column>
    </ng-template> 

我希望输出带有列的网格以及页脚中每列的相应总和。

输出只显示没有页脚的网格。

Answer 1

StackBlitz

模板

 <kendo-grid
            [data]="gridData"
        >
        <kendo-grid-column field="ProductID" title="Product ID" width="120">

        </kendo-grid-column>

        <kendo-grid-column field="UnitPrice" title="Unit Price" width="230">

            <ng-template
                kendoGridFooterTemplate
                    let-column="column">Total {{column.title}}: {{total["UnitPrice"].sum}}</ng-template>
        </kendo-grid-column>

        </kendo-grid>

appcomponent.ts

export class AppComponent {
    public aggregates: any[] = [{field: 'UnitPrice', aggregate: 'sum'}];


    public data = [{
        'ProductID': 1,
        'ProductName': 'Chai',
        'UnitPrice': 18.0000
    }, {
        'ProductID': 2,
        'ProductName': 'Chang',
        'UnitPrice': 19.0000
    }, {
        'ProductID': 3,
        'ProductName': 'Aniseed Syrup',
        'UnitPrice': 10.0000
    }, {
        'ProductID': 4,
        'ProductName': "Chef Anton\'s Cajun Seasoning",
        'UnitPrice': 22.0000
    }, {
        'ProductID': 5,
        'ProductName': "Chef Anton\'s Gumbo Mix",
        'UnitPrice': 21.3500
    }];

    public gridData: any = this.data;
    public total: any = aggregateBy(this.data, this.aggregates);

}