时间戳

首页 > 解决方案 > 如何计算 IONIC 表单中多个输入字段的值并将其输出到表单中？

angular - 如何计算 IONIC 表单中多个输入字段的值并将其输出到表单中？

问题描述

我有一个订单表格，其中应选择路线（A、B、C）和车辆数量（汽车 A、B、C）。不同车辆和路线的价格如表所示。现在我想在选择车辆数量时计算并显示价格（事件 onChange）。如何在表单中显示附加值？

提前致谢。

html - File

...
    <ion-item>  
          <ion-label floating>Tour</ion-label>
          <ion-select [(ngModel)]="tourModel" (ionChange)="onChange(tourModel)">
              <ion-option value="0">no</ion-option>
              <ion-option value="1">Route A</ion-option> 
              <ion-option value="2">Route B</ion-option>
              <ion-option value="3">Route C</ion-option>
          </ion-select>
        </ion-item>
        <ion-item>

        Car A <select [(ngModel)]="carAmodel" (onChange)="onChgS6(carAmodel)">
              <option>0</option>
              <option>1</option>
              <option>2</option>
            </select>  if { route === A } {{ carAmodel * priceA }} => something like that
        Car B <select>
              <option>0</option>
              <option>1</option>
              <option>2</option>
            </select> {{ priceCarB }}
       Car C <select>
              <option>0</option>
              <option>1</option>
              <option>2</option>
            </select>  {{ priceCarC }}
      ......

   .ts File

   onChange(carAmodel) {
       if ( carAmodel === "1" )
          { priceA = 

    }



#######################
   Pricetable

   Route/CarOption        A        B        C
   Route A                42       60       75
   Route B                48       70       85
   Route C                60       80      100

   priceTable = ['Route A'][42,60,75],
                ['Route B'][48,70,85],
                ['Route C'][60,80,100]

   Don't know how to define this Array.

标签： angularformsionic-frameworkcalculation

解决方案

if { route === A } {{ carAmodel * priceA }}

可以使用*ngIf 

<span *ngIf="route === A"> {{carModel * priceA}} </span>

价格表可以通过多种方式构建，一个示例可以是：

const priceTable = {
    'Route A' : {
        A: 42,
        B: 60,
        C: 75
    },
    ....
}

可以像这样食用：

<span *ngIf="route === A"> {{priceTable['Route A'][carModel]}} </span>

值得一看，*ngSwitchCase您还可以创建一个 PriceComponent 将路线和汽车作为@Input

<app-price-display [route]="selectedRoute" [car]="selectedCar"></app-price-display>

在这种情况下，所有价格计算逻辑和显示逻辑都成为组件的本地逻辑。

推荐阅读