Question

我有一个包含产品费率和数量输入的表格。我需要计算值（费率*数量）并将值分配给数量输入字段。

请在下面找到代码段：

  <form [formGroup]="additemForm" (ngSubmit)="submit(additemForm.value)" >

  <ion-row>
    <ion-col>
      <ion-list inset>            
        <ion-item>
          <ion-label>Product :</ion-label>
          <ion-select formControlName="product">
              <ion-option *ngFor="let product of productArray" value="{{product.code}}" selected="false">{{product.name}}</ion-option>
          </ion-select>
        </ion-item> 
        <ion-item>
          <ion-label>QUANTITY :</ion-label>
          <ion-input type="number" formControlName="qty"></ion-input>
        </ion-item>             
        <ion-item>
          <ion-label>RATE:</ion-label>
          <ion-input type="number" formControlName="rate"></ion-input>
        </ion-item>
        <ion-item>
          <ion-label>Value :</ion-label>
          <ion-input type="number" formControlName="value"></ion-input>
        </ion-item>                         
      </ion-list>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col class="signup-col">
      <button ion-button class="submit-btn"  type="submit" [disabled]="!additemForm.valid">Submit</button>
      <button ion-button type="button" (click)='cancel()' >Cancel</button>
    </ion-col>
  </ion-row>      

  </form>

Answer 1

您需要使用[(ngModel)]。

    <ion-item>
      <ion-label>QUANTITY :</ion-label>
      <ion-input type="number" formControlName="qty" [(ngModel)]="quantity"></ion-input>
    </ion-item>             
    <ion-item>
      <ion-label>RATE:</ion-label>
      <ion-input type="number" formControlName="rate" [(ngModel)]="rateValue"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Value :</ion-label>
      <ion-input type="number" formControlName="value" [(ngModel)]="rateValue * quantity"></ion-input>
    </ion-item>

现在，此后仍然可以使用数量输入字段。并且更改此值也会影响其他2个输入值。您可以禁用输入，因此它将显示为只读输入。这在我的代码中有效。

ionic2：如何在表格中进行计算？

1 个答案: