Question

我有一个订购单，其中应选择路线（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.

Answer 1

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，您还可以创建一个将路线和汽车作为@Input的PriceComponent

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

在这种情况下，所有价格计算逻辑和显示逻辑对于组件而言都是本地的。

Answer 2

好吧，它根本不起作用。选择2和3 ist Nan€的输出。

这是我的html代码

    <ion-item>  
      <ion-label floating>route</ion-label>
      <ion-select [(ngModel)]="route"  (ionChange)="onChange(route)"> 
          <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>
    <div [hidden]="!hideMe"  >



    <pre>
    6er <select [(ngModel)]="S6" name="S6">
          <option selected>0</option>
          <option>1</option>
          <option>2</option>
        </select>  <span *ngIf="route != 0">{{ priceTable[1][6] * S6 }} €</span>
    8er <select [(ngModel)]="S8" name="S8" ng-init="S8===0">
          <option selected>0</option>
          <option>1</option>
          <option>2</option>
        </select> {{ priceTable[1][8] * S8}} €
   10er <select [(ngModel)]="S10" name="S10">
          <option selected>0</option>
          <option>1</option>
          <option>2</option>
        </select> <span *ngIf="route != 0">{{ priceTable[1][10] * S10}} €</span>
     <br>
    </pre>

    </div>
  </ion-card-content>

如何从IONIC形式的几个输入字段中计算值并以形式输出它们？

2 个答案: