angular - 无法从 html 读取更新的数据到角度组件

Question

我正在用.netcore 开发一个AngularApp。在其中一个角度分量中，我使用垫步形式。我能够使用我实现的逻辑在前端显示数据。但是当我想发布数据（显示在前端）时，我无法显示数据的更新值。请指导我了解我所缺少的。提前致谢。

应用程序.html

 <mat-step>
         <h3>Data</h3>
         <form [formGroup] = "fourthFormGroup" (ngSubmit)="form4()" #formfour = "ngForm">
         <div class="row1 ">
            <div class="col-md-6">        
<form class="list" >
 <p> <input type="checkbox" name="v1" value="B" [(ngModel)]="item1.isChecked" (change)="updateTotal(item1)"> dt </p>
  <p><input type="checkbox" name="v2" value="C" [(ngModel)]="item2.isChecked" (change)="updateTotal(item2)"> pd</p>
  <p><input type="checkbox" name="v3" value="Bt" [(ngModel)]="item3.isChecked" (change)="updateTotal(item3)"> if</p>
 total: {{total}}
</form>
</div> 
          </div>
          </form>

<!-- <mat-card>
<mat-card-content>

</mat-card-content>
</mat-card> -->

         <div *ngIf="data">
            <button mat-button (click) = "formfour.ngSubmit.emit()" >Download</button>
         </div>
      </mat-step>

应用程序.ts

 item1 = { isChecked: false, value: 2 };
  item2 = { isChecked: false, value: 5 };
  item3 = { isChecked: false, value: 5 };
total = 0;

updateTotal(item) {
   if(item.isChecked) {
     this.total += item.value*10;
   } else {
     this.total -= item.value*10;
   }
 }
  ngOnInit() {
 this.fourthFormGroup = this._formBuilder.group({
      U2: [this.total]
    });
}
form4(){
    console.log(this.fourthFormGroup.value);
  }

在“U2”的位置应该显示“total”的更新值。相反，它显示 0，因为它被定义为更新“总”值的初始值

标签： angular

Answer 1

修改时必须重置表单组值total。

试试这样：

updateTotal(item) {
   if(item.isChecked) {
     this.total += item.value*10;
   } else {
     this.total -= item.value*10;
   }
    this.fourthFormGroup.patchValue({
      U2: this.total, 
    });
 }