Question

在这个代码中，我实现了添加销售，在我有一个销售和产品，这些产品我在一个阵列产品，并在此表中显示。我的问题是，当我添加一些产品时，我的价值，价格，数量和总显示确定，但是当我可以更改数量或价格时，我无法更改我的总自动。我厌倦了在[值]中使用[（ngModel）]我可以改变我的总数，但我的价值是相同的，就像在照片中一样

编辑代码html

 <form [formGroup]="addsale" (ngSubmit)="onaddsale()">

          <tr class="group" style="cursor: pointer" *ngFor="let item of products; let i = index">
             <td>
              <input formControlName="Unit_price" id="Unit_price " type="number" class="validate"[value]="item.Unit_price">
            </td>
            <td>
              <input formControlName="Quantity" id="Quantity " type="number" class="validate"  [value]="item.Quantity"> 
            </td>
            <td>
              <input type="text" formControlName="Description" id="Description" name="Description" [value]="item.Description">
            </td>
            <td>
              <input formControlName="Subtotal" id="Subtotal" type="number" class="validate"  [value]="item.Subtotal">
            </td>
          </tr>
        </tbody>
      </table>
      <br>
      <br>
      <div class="row">
        <div class="input-field col s2" style="float: right;">
          <label for="total">Total {{total}} ALL</label>
          <input formControlName="total" id="total" type="text" class="validate"   [value]="total">
        </div>
      </div>
    </form>

对于{{total}}我在ts：

中调用此函数

代码ts：

        this.addsale = this.fb.group({
          'invoice_number': new FormControl('', [Validators.required, Validators.nullValidator]),
          'amount_paid': new FormControl('', Validators.required),
          'notes': new FormControl('', Validators.required),
          'Subtotal': new FormControl('', Validators.required),
          'products': this.fb.array([]),
          'total': new FormControl('', Validators.required),
          'Unit_price': new FormControl('', Validators.required),
          'Quantity': new FormControl('', Validators.required),
          'Description': new FormControl('', Validators.required)
        });
      }

      ngOnInit() {

        this.products = this.ps.getProduct();
        console.log(this.products)

        this.pts.getAllProductType().subscribe(
          producttype => {
            this.producttype = producttype;
          }
        );
      }


      onaddsale() {

      }

      get total() {
        let Total = 0;
        for (let p of this.products) {
          Total += p.Unit_price * p.Quantity;
        }
        return Total;
      }
        }

当我更改数量或unie_price时，您能否建议我如何实施更新总计？

谢谢

Answer 1

使用ngModel的完整示例：

dependencies {
  compile 'org.altbeacon:android-beacon-library:2+'
}

Answer 2

使用双向绑定更新模型值，因此总计将相应更新。同样删除formControlName，因为它是反应式表单。

<强> HTML

<tbody>
    <tr class="group" style="cursor: pointer" *ngFor="let item of products; let i = index">
        <td>
            <input id="Unit_price " type="number" class="validate" [(ngModel)]="item.Unit_price">
        </td>
        <td>
            <input id="Quantity " type="number" class="validate" [(ngModel)]="item.Quantity">
        </td>
        <td>
            <input type="text" id="Description" name="Description" [(ngModel)]="item.Description">
        </td>
        <td>
            <input readonly id="Subtotal" type="number" class="validate" [(ngModel)]="item.Subtotal">
        </td>
    </tr>
</tbody>
<div class="input-field col s2" style="float: right;">
    <label for="total">Total {{total}} ALL</label>
    <input id="total" type="text" class="validate" [value]="total">
</div>

DEMO

如果我在打字稿中有数量*价格，如何更新我的总数

2 个答案: