Question

在我的项目中，我想创建一张发票。在此发票中，我使用函数get subtotal(){}计算值，完全正常工作。现在，如果我更改此小计，例如，我想从100到90进行折扣。

我已经尝试过此代码，但它不起作用。拜托，您能告诉我如何解决这个问题吗？ Html代码：

  <div class="input-field col s2" style="float: right;">
      <input formControlName="Subtotal " id="Subtotal " [value]="subtotal " type="number" class="validate" (change)="updateForm($event)">
    </div>

ts代码：

  updateForm(event) {
    console.log(event)
    let amountpaidd = event.target.value
     this.addsale['controls']['Subtotal '].setValue(amountpaidd );
   }
  onaddsale() {
    let sale = this.addsale.value;
    sale.Subtotal = this.subtotal;
    let newSale = new Sale(sale);
    console.log(newSale)}

 get subtotal() {
    return this.products
      .map(p => p.p_Unit_price * p.p_Quantity)
      .reduce((a, b) => a + b, 0);
  }

谢谢！

更新

this.addsale = this.formbuilder.group({
      'Subtotal ': new FormControl('', Validators.required),
      'products': this.formbuilder.array([]),
    });

Answer 1

如果你需要有一个预先计算的值，那么只需设置控件的值。不要使用视图（HTML）来回传递值。

首先，使用表单构建器创建表单。

然后，使用this.addSale.controls.Subtotal.setValue(this.subtotal)从小计设置值。每当小计更改时执行此操作。

ngOnInit() {
  this.service.productList.subscribe(productList => {
    this.products = productList;
    this.addsale.controls.Subtotal.setValue(this.subtotal)
  });
}

不使用sale.Subtotal = this.subtotal。

let sale = this.addsale.value已经这样做了。

在您的视图中，使用基本的反应式表单绑定。

 <input formControlName="Subtotal" id="Subtotal" type="number" class="validate">

每当您致电setValue(this.subtotal)

时，您的价值都会得到更新

用户可以覆盖当然的值。但如果您添加更多产品，它可能会被覆盖。如果您想要阻止这种情况，您应该观察用户是否已经这样做并阻止使用新的小计更新值。

Working demo基于您在评论中提供的演示。

使用时我无法提交值输入（更改）

1 个答案: