angular - 两列或多列如何求和并显示在第三列

Question

看到下图作为标记数据我想要两列数据总和并在新列中生成以显示它。在 Kendo for Angular 4 中怎么可能。

Answer 1

为您的数据模型创建一个新的计算属性，它将返回所需属性的总和。

export class DataModel {
    a: number;
    b: number;
    get sum() {
      return this.a + this.b;
    }
}

然后，为其他属性添加一列。

或者，使用 Kendo 提供的模板属性。

版本 1:

columns: [{
            field: "PropA",
            title: "Prop A"
          },
          {
            field: "PropB",
            title: "Prop B"
          },
          {
            field: "Sum",
            template: "{{dataItem.PropA + dataItem.PropB}}"
          }]

版本 2:

    <kendo-grid [data]="gridData">
        <kendo-grid-column field="PropA" title="PropA"></kendo-grid-column>
        <kendo-grid-column field="PropB" title="PropB"></kendo-grid-column>
        <kendo-grid-column field="Sum" title="Sum">
            <ng-template kendoGridCellTemplate let-dataItem>
                 {{dataItem.PropA + dataItem.PropB}}
            </ng-template>
        </kendo-grid-column>
    </kendo-grid>