我使用angular 11创建表单

我想根据getItemTotal（）函数的返回值更新我的数组列表并放入数据库，在这种情况下，我使用了[（ngModel）]任何尝试过的方法，但我不能这样做，在函数调用后如何更新我的itemsArry列表

我的home.component.html文件是

  <div class="card-body">
      <h4 class="card-title d-flex justify-content-between">Items Details <button type="button" class="btn btn-primary" (click)="addRow()" >+</button></h4>


      <form action="" #invoiceBody="ngForm">
        <div *ngFor="let obj of itemsArray;let i=index">
      <div class="row" >

        <div class="col-md-3">
          <label>Item No</label>
          <input type="text" class="form-control" name="itemNo{{i}}" [(ngModel)]="obj.itemNo" >
        </div>
        <div class="col-md-3">
          <label>Unit Price</label>
          <input type="number" class="form-control" name="unitPrice{{i}}" [(ngModel)]="obj.unitPrice">
        </div>
        <div class="col-md-3">
          <label>Quantity</label>
          <input type="number" class="form-control" name="quantity{{i}}" [(ngModel)]="obj.quantity">

        </div>
        <div class="col-md-2">
          <label>Total</label><br>
          <input type="number" class="form-control" name="total{{i}}" [value]="getItemTotal(obj)" [(ngModel)]="obj.total" >

        </div>

        <div class="col-md-1" *ngIf="i!=0">
          <button class="btn btn-danger" style="margin-top:30px" (click)="removeRow(i)">-</button>
        </div>



       </div>

      </div>


      </form>


      </div>

项目详情+
项目编号
单价
量
总计

-

我的home.components.ts文件是

import { Component, OnInit } from '@angular/core'



class itemObject {
  itemNo:any;
  unitPrice:number=0;
  quantity:number=0;
  total:number=0;

}

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

itemObject=new itemObject()
itemsArray:Array<itemObject>=[
  {
    itemNo:"",
    unitPrice:0,
    quantity:0,
    total:0

  }
]


  constructor() { }

  ngOnInit(): void {
  }



  addRow() {
    this.itemsArray.push(this.itemObject)


  }

  removeRow(i: number) {
    this.itemsArray.splice(i)

  }



  getItemTotal(item: itemObject) {
     return (item.quantity && item.unitPrice) ? item.quantity * item.unitPrice:0;
  }

}

从'@angular/core'导入{Component，OnInit}
类itemObject{
项目编号：任何；
单价：编号=0；
数量：数量=0；
总数：数字=0；
}
@组成部分({
选择器：“应用程序主页”，
templateUrl:“./home.component.html”，
样式URL:['./home.component.css']
})
导出类HomeComponent实现OnInit{
itemObject=新的itemObject（）
数组=[
{
项目编号：“，
单价:0,，
数量：0，
总数：0
}
]
构造函数（）{}
ngOnInit（）：void{
}
addRow（）{
this.itemsArray.push（this.itemObject）
}
（一：编号）{
此.itemsArray.splice（i）
}
getItemTotal（项：itemObject）{
退货（item.quantity&item.unitPrice）？item.quantity*item.unitPrice:0；
}
}

您不能将

[（ngModel）]

和

[值]

混合使用。你可以用

     <input type="number" class="form-control" 
                 [ngModel]="getItemTotal(obj)" 
                 (ngModelChange)="obj.total=$event">

见+这使得角度考虑始终作为数值

更新对于总金额，请使用getter

  get totalSum(){
       return this.itemsArray.reduce((a,b)=>b.unitPrice && b.itemQuantity? 
                a+(+b.unitPrice)*(+b.itemQuantity):a,0)
    }

和in.html

{{totalSum}}

---

getter使任何更改都可以执行函数。您应该小心使用-使用多个服务器“getter”不是一个好主意，因为可能会导致性能不佳（如果我们的问题是只有少量数据，这是完全有效的）

ngModel链接到itemObject的同一引用，这就是为什么它会用添加的itemObject覆盖数据，而您实际上会“动态”计算总数。它目前仅用于用户显示目的。您需要保存对象本身的总数

下面是一个快速解决方案：

您最好使用带有数组的ReactiveFormModule，这是一个很好的指南：

---

编辑：reactiveFormModule版本

但我的数组总数字段仍未更新抱歉，我更新了应答器Thanx bro，我的数组现在已正确更新。我不想要这个getTotal（）功能。谢谢，反应式表单版本：兄弟，我还有一个问题是的，你的问题是什么？

{{totalSum}}