Как вычислить значения из нескольких полей ввода в форме IONIC и вывести их в форме? - PullRequest
Новая
       7

Как вычислить значения из нескольких полей ввода в форме IONIC и вывести их в форме?

0 голосов
/ 24 сентября 2018

У меня есть форма заказа, в которой следует выбрать маршрут (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.

Ответы [ 2 ]

0 голосов
/ 25 сентября 2018

ОК, работает не на всех выбирает.Вывод выбора 2 и 3 составляет Нан €.

Вот мой HTML-код 

<code>    <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>

0 голосов
/ 24 сентября 2018 
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>

В этом случае вся логика расчета цены и логика отображения становятся локальными для компонента.

...