Angular 表格行包含使用 Reactive Forms 动态的列总和 [英] Angular table row contains sum of columns dynamically using Reactive Forms

问题描述

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

元素 |法国 |中文 |-------------------元素 A |||-------------------元素 B |||-------------------元素 C |||-------------------总计 |||

这是我的角度代码:组件.ts:

listDecompositionLibelle: string[] = ['elem A', 'elem B','elem C'];ngOnInit() {this.valuesForm = this.fb.group({分解:this.fb.array([])});for (让 i = 0; i <3; i++) {this.addDecompositionLigne(this.listDecompositionLibelle[i]);}}//向数组添加元素的函数addDecompositionFormGroup(typeDecomposition): FormGroup {返回 this.fb.group({类型:[类型分解]，frVal: [''],值:['']});}//函数推送我的数组addDecompositionLigne(typeDecomposition) {(<FormArray>this.valuesForm.get('decomposition')).push(this.addDecompositionFormGroup(typeDecomposition));}

这是我的 html 代码:

<tr><th>元素</th><th>FR/th><th>EN</th></tr><tr *ngFor="let 分解 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>//我想添加一行来计算表中每一列的值的总和

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

提前致谢.

此致.

解决方案

James，在 angular 中的变化是观察者订阅 valueChanges.

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

this.valuesForm.get('decomposition').valueChanges.subscribe(res=>{//这里我们有资源，所以我们可以做一些像让 sumFR=0让 sumEN=0res.forEach(x=>{sumFR+=(+x.frVal);//<--+x.frVal是先转换成数字sumEN+=(+x.enVal);})this.sumFR=sumFR;this.sumEN=sumEN})

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

顺便说一下，必须创建一个里面有 FormArray 的 FormGroup.您可以简单声明

decomposition=new FormArray([])//或使用FormBuilder分解=this.fb.array([])

并在 .html 中使用

<!--请注意，我们使用的是 [formGroup]="item"，而不是 [formGroupName]="i"--><tr *ngFor="let item of分解.controls;let i=index" [formGroup]="item" ><td><input formControlName="valEn"></td><td><input formControlName="valFn"></td></tr>

//或

<!--看声明formGroup=formArray<div [formGroup]="分解"><!--现在，我们可以使用 [formGroupName]="i"--><tr *ngFor="let item of分解.controls;let i=index" [formGroupName]="i" ><td><input formControlName="valEn"></td><td><input formControlName="valFn"></td></tr>

i'm working in angular project where i want to show a table with two columns and dynamic row and last row conatins sum of each column when user type any number , this is what i want to achieve :

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

and this is my angular code : componenet.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));
}

and this is my html code :

<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

do you have any idea on how to add a row that calculate dynamically the sum of values in each column when the user start to type a value in the inouts?

Thanks in advance.

Best Regards.

解决方案

James, in angular the changes are observer subscribe to valueChanges.

If you declare two variables sumFR and sumEN, you can AFTER declare the form

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
})

In .html you use {{sumEN}} and {{sumFR}}

By the way is innecesary create a FormGroup with a FormArray inside. You can simple declare

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

And use in .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>

这篇关于Angular 表格行包含使用 Reactive Forms 动态的列总和的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！