角度表行包含使用反应形式动态动态列的总和

我正在 Angular 项目中工作，我想显示一个包含两列和动态行的表格，当用户输入任何数字时，最后一行包含每列的总和，这就是我想要实现的目标：

element | FR | EN |
-------------------
elem A  |    |    |
-------------------
elem B  |    |    |
-------------------
elem C  |    |    |
-------------------
Total   |    |    |

这是我的角度代码：component.ts：

listDecompositionLibelle: string[] = ['elem A', 'elem B','elem C'];

ngOnInit() {

    this.valuesForm = this.fb.group({
          decomposition : this.fb.array([
          ])
    });

    for (let i = 0; i < 3; i++) {
          this.addDecompositionLigne(this.listDecompositionLibelle[i]);
    }
}

// function to add element to array
 addDecompositionFormGroup(typeDecomposition): FormGroup {
                 return this.fb.group({
                  type: [typeDecomposition],
                  frVal: [''],
                  enVal: ['']
                 });
 }

 // function to push my array
addDecompositionLigne(typeDecomposition) {
           (<FormArray>this.valuesForm.get('decomposition')).push(this.addDecompositionFormGroup(typeDecomposition));
}

这是我的 html 代码：

<table class="table table-bordered" formArrayName="decomposition">
      <tbody>
          <tr>
            <th>element</th>
            <th>FR</th>
            <th>EN</th>
        </tr>
        <tr *ngFor="let decomposition of valuesForm.get('decomposition ').controls;let i=index" [formGroupName]="i" >
          <td>
              {{listDecompositionLibelle[i]}}
            </td>
            <td>
              <input type='text' class="form-control" formControlName="frVal" [id]="'frVal'+i">
            </td>
            <td>
              <input type='text' class="form-control" formControlName="enVal" [id]="'enVal'+i">
            </td>
            <td>
        </tr>
      </tbody>
</table>
// i want to add a row that calculte the sum of the values in each column of my table

您是否知道如何添加一行，当用户开始在输入中键入值时动态计算每列中的值之和？

提前致谢。

此致。

詹姆斯，在角度上，变化是观察者订阅 valueChanges 的。

如果声明两个变量 sumFR 和 sumEN，则可以在声明形式之后

this.valuesForm.get('decomposition').valueChanges.subscribe(res=>{
   //here we has res, so we can make some like
   let sumFR=0
   let sumEN=0
   res.forEach(x=>{
      sumFR+=(+x.frVal);  //<--the +x.frVal is to convert first to number
      sumEN+=(+x.enVal); 
   })
   this.sumFR=sumFR;
   this.sumEN=sumEN
})

在 .html 中，您使用 {{sumEN}} 和 {{sumFR}}

顺便说一下，没有必要创建一个内部有 FormArray 的 FormGroup。您可以简单地声明

decomposition=new FormArray([])
//or using FormBuilder
decomposition=this.fb.array([])

并在.html中使用

<!--see that we used [formGroup]="item", not [formGroupName]="i"-->
<tr *ngFor="let item of decomposition.controls;let i=index" [formGroup]="item" >
  <td><input formControlName="valEn"></td>
  <td><input formControlName="valFn"></td>
</tr>

//or

<!--see that declare the formGroup=the formArray
<div [formGroup]="decomposition">
   <!--and now, we can use [formGroupName]="i"-->
   <tr *ngFor="let item of decomposition.controls;let i=index" [formGroupName]="i" >
      <td><input formControlName="valEn"></td>
      <td><input formControlName="valFn"></td>
   </tr>
</div>