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

Question

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

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

这是我的角度代码： 组件.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

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

提前致谢。

最好的问候。

Answer 1

James，从角度来看，变化是观察者订阅 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>

//或

<!--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>