角度百分比和总计算

Question

我正在使用角度反应形式。我必须计算百分比和总数，并且必须在 html UI 中显示。它就像产品计费......例如

我的json格式是

{
    "amount": 10000.0,
    "balance": 0.0,
    "no": "1",
     percentage:2

"det": [
        {
            "amount": 1000.0,
            "desc": "ok",
            "remarks": "ok",
            "year": 2020
        },
        {
            "amount": 1000.0,
            "desc": "ok",
            "remarks": "ok",
            "year": 2020
        },
        {
            "amount": 0.0,
            "desc": null,
            "remarks": null,
            "year": 0
        }
    ],

我要计算det数组里面数量的百分比和总量

我的 ngOnInit 是

ngOnInit(): void {
    this.makeForm = this.fb.group({

      balance    : ['', Validators.required],
      amount     : ['', Validators.required],
      no         : ['', Validators.required],
      percentage : ['', Validators.required],

      details: new FormArray([
        this.det(), 
      ])
    })


det(){
      return new FormGroup({
        amount         : new FormControl(''),
        desc           : new FormControl(''),
        remarks        : new FormControl(''),
        year           : new FormControl(''),
    })}

如何计算百分比和总数 内表是可编辑字段.....如何做到这一点....我的疑问是如何计算角度的百分比和总数

percentage : 2                     /////percentage field


table


sl:no       desc         year           remarks      percentage      amount       %total      total      

1           none          2021            ok             2          10000         200       10200

2           none          2020            ok             2          1000          20         1020


                                                          Total             11220                     

Answer 1

使用“getter”来总计

get total()
{
   return this.makeForm && this.makeForm.value.det?
          this.makeForm.value.map(x=>x.amount).reduce((a,b)=>(+a)+(+b)):
          0
}

在.html中

       <td>
        <input formControlName="amount">
       </td>
       <td>
        {{+makeForm.value.percentage*
            (+makeForm.get('det.'+i+".amount).value))/100 |number:'0.2-2'}}
       </td>