如何在Angular中總結對象的屬性

Question

我的輸入是以下形式的 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 的總計。然后總計字段應該具有對象的總體總計。 我怎樣才能做到這一點？

Answer 1

根據評論進行計算，

小計是針對實際列的，它是在文本框中輸入的。 那么總數就是實際*激勵——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));