如何以Angular 对对象的属性求和

yx2lnoni 于 2021-09-13 发布在 Java

关注(0)|答案(2)|浏览(392)

我的输入是一个json对象，格式如下：

{
  "baskets": [{
    "id": 127,
    "name": "name 1",
    "kpIs": [{
      "id": 419,
      "name": var a1, "incentive": 0, "target": "0", "actual": 0, "description": null
    }, {
      "id": 420,
      "name": var a2, "incentive": 0, "target": "0", "actual": 0, "description": null
    }],
    "percentage": 0
  }, {
    "id": 128,
    "name": "name 2",
    "kpIs": [{
      "id": 421,"name": "var b1","incentive": 0,"target": "0","actual": 0, "description": null
    }, {
      "id": 422, "name": "var b2","incentive": 0,"target": "3", "actual": 0, "description": null
    }, {
      "id": 423, "name": " var b3","incentive": 0,"target": "5.6","actual": 0,"description": null
    }, {
      "id": 424,"name": " var b4", "incentive": 0, "target": "2", "actual": 0, "description": null
    }],
    "percentage": 0
  }],
  "id": 23,
}

我想计算每个嵌套对象的总计（目标、激励和实际）以及对象的总体总计。我已将对象绑定到表：

.

<table class="table table-responsive table-bordered table-striped w-100%">
                <thead>
                    <tr>
                        <th data-label="KPI Basket" scope="col">KPI Basket</th>
                        <th data-label="KPIs" scope="col">KPIs</th>
                        <th data-label="Tgt figures" scope="col">Target</th>
                        <th data-label="Tgt figures" scope="col">Actual</th>
                        <th data-label="Incentive" scope="col">Incentive</th>
                        <th data-label="% of Total" scope="col">Total</th>
                    </tr>
                </thead>
                 <tbody *ngFor="let data of document.baskets; let i = index">
                    <tr style="margin: auto;" *ngFor="let obj of data.kpIs">
                        <td>{{ data.name }}</td>
                        <td>{{ obj.name }}</td>
                        <td>{{ obj.target }}</td>
                        <td>
                            <input
                                type="number"
                                [(ngModel)]="obj.actual"
                                name="actual{{j}}"
                                class="form-control"
                                (change)="performOperations(obj.actual, obj.target, obj.incentive  )"
                            />
                        </td>
                        <td>{{ obj.incentive }}</td>
                        <td>
                            <input
                            type="number"
                            [(ngModel)]="individualTotal"
                            name="individualTotal{{j}}"
                            class="form-control"
                        />
                        </td>
                    </tr>
                    <tr>
                        <th data-label="KPI Basket" scope="row"></th>
                        <strong> <td data-label="KPIs">Sub-total</td></strong>
                        <td data-label="Incentive">{{ subTotal }}</td>
                        <td data-label="% of Total"></td>
                        <td data-label="Tgt figures"></td>
                        <td data-label="Tgts"></td>
                    </tr>
                </tbody> 
                <tbody>
                    <tr>
                        <strong>
                            <tr data-label="KPIs">
                                Total
                            </tr></strong
                        >
                        <td data-label="KPI Basket" scope="row"></td>
                        <td data-label="Incentive"></td>
                        <td data-label="% of Total"></td>
                        <td data-label="Tgt figures">35</td>
                        <td data-label="Tgts">35</td>
                    </tr>
                </tbody>
            </table>

“小计”字段应为嵌套对象名称1和名称2添加总计。然后，“总计”字段应为对象添加总计。我怎样才能做到这一点？

JavaScript Angular typescript

来源：https://stackoverflow.com/questions/68337328/how-to-sum-the-properties-of-an-object-in-angular

2条答案

按热度按时间

72qzrwbm1#

根据评论进行计算，
小计用于实际列，该列在文本框中输入。那么总数就是实际的*激励–user9913710

const data = {
  baskets: [{
      id: 127,
      name: "name 1",
      kpIs: [{
          id: 419,
          name: "var a1",
          incentive: 0,
          target: 0,
          actual: 0,
          description: null,
        },
        {
          id: 420,
          name: "var a2",
          incentive: 0,
          target: 0,
          actual: 0,
          description: null,
        },
      ],
      percentage: 0,
    },
    {
      id: 128,
      name: "name 2",
      kpIs: [{
          id: 421,
          name: "var b1",
          incentive: 0,
          target: 0,
          actual: 0,
          description: null,
        },
        {
          id: 422,
          name: "var b2",
          incentive: 0,
          target: 3,
          actual: 0,
          description: null,
        },
        {
          id: 423,
          name: " var b3",
          incentive: 0,
          target: 5.6,
          actual: 0,
          description: null,
        },
        {
          id: 424,
          name: " var b4",
          incentive: 1,
          target: 2,
          actual: 2,
          description: null,
        },
      ],
      percentage: 0,
    },
  ],
};

const basketTotal = data.baskets.map((basket) => {
  // total = actual * incentive;
  basket.kpIs = basket.kpIs.map((kpi) => ({
    ...kpi,
    total: kpi.actual * kpi.incentive,
  }));
  // sub-total = sum(actual);
  const subTotal = basket.kpIs.reduce((total, kpi) => {
    return total + kpi.actual;
  }, 0);

  return { ...basket, subTotal };
});

console.log(JSON.stringify(basketTotal, null, 2));

赞(0）回复(0）举报 2021-09-13

mm9b1k5b2#

您可能希望通过以下方式调用。减少KPI篮数组（例如奖励）：

function kpIsSum(arr: kpI[]): number{
  return arr.reduce((sum, item) => sum + item.incentive, 0);
}

function basketsSum(arr: basket[]): number{
  return arr.reduce((sum, item) => sum + kpIsSum(item.kpIs), 0);
}

如果您同时想要两个金额（奖励和合计），您可以：

type kpisSum = { incentive: number; actual: number }

function kpIsSum(arr: kpI[]): kpisSum {
  return arr.reduce(({incentive, actual}, item) => (
      {
        incentive: incentive + item.incentive,
        actual: actual + item.actual
      }),
    {incentive: 0, actual: 0});
}

type basketsSum = { incentive: number; actual: number }

function basketsSum(arr: basket[]): basketsSum {
  return arr.reduce(({incentive, actual}, item) => {
      const sum = kpIsSum(item.kpIs);
      return {
        incentive: incentive + sum.incentive,
        actual: actual + sum.actual,
      }
    },
    {incentive: 0, actual: 0});
}

在我看来，第一个更清楚。您可以修改它以传递要计算总和的对象键。

赞(0）回复(0）举报 2021-09-13

我来回答

如何以Angular 对对象的属性求和

2条答案

相关问题

热门标签

最新问答