Как правильно вывести значение из объекта и добавить его к другому значению | угловатый - PullRequest
Новая
       14

Как правильно вывести значение из объекта и добавить его к другому значению | угловатый

1 голос
/ 06 июля 2019

Я довольно новичок в Angular и пытаюсь создать приложение для заказа такси. Пока все работает так, как задумано, но мне нужно реализовать калькулятор цен, основанный на цене транспортного средства и тарифе, чтобы двусторонняя привязка {{price}} показывала пользователю правильную сумму

транспортное средство имеет тип числа (0,5,20), но тариф - это json-объект zipValue = {view: '1010 - Innere Stadt', значение: 24}

Мое решение до сих пор заключалось в заполнении переменной транспортным средством и добавлении object.value 

price = this.zipValue.value + this.price

Angular выдает ошибку, что свойство 'value' не существует для типа 'object'

Как правильно рассчитать это без ошибок?

Пример кода: приложение-component.html 

<form (ngSubmit)="onSubmit(form)" #form="ngForm">

<mat-form-field>
  <mat-label>Passagiere</mat-label>
    <mat-select name="passengers" ngModel [(value)]='passengersAmount'>
      <mat-option *ngFor="let p of passengers" [value]="p.value">
            {{p.view}}
      </mat-option>
   </mat-select>
</mat-form-field>

<mat-form-field>
        <mat-label>Gepäckstücke</mat-label>
        <mat-select name="luggage" ngModel [(value)]='luggage'>
          <mat-option *ngFor="let s of pieces" [value]="s.value">
            {{s.view}}
          </mat-option>
        </mat-select>
      </mat-form-field>

<mat-select placeholder="Postleitzahl" [(ngModel)]="zipValue" name="zip">
  <mat-option *ngFor="let z of zip" [value]="z" >{{z.view}}</mat-option>
 </mat-select>

<button (click)="calculate();">name</button>
</form>

Пример кода: app.component.ts 

export class FormDeComponent {

  //
  // Dynamic Objects for SELECT
  //

  passengers = [
    { value: 1, view: '1 Person' },
    { value: 2, view: '2 Personen' },
    { value: 3, view: '3 Personen' },
    { value: 4, view: '4 Personen' },
    { value: 5, view: '5 Personen' }
  ];

  pieces = [
    { value: 0, view: 'Keine' },
    { value: 1, view: '1 Stück' },
    { value: 2, view: '2 Stück' },
    { value: 3, view: '3 Stück' },
    { value: 4, view: '4 Stück' },
    { value: 5, view: '5 Stück' },
];

  zip = [
    { view: '1010 - Innere Stadt', value: 24 },
    { view: '1020 - Leopoldstadt', value: 27 },
    { view: '1030 - Landstraße', value: 29 }
  ];

  mod = [0, 5, 20]

  passengersAmount: number;
  luggage: number;
  price: number;
  zipValue: object;

  calculate() {
    if (this.passengersAmount <=3 && this.luggage <= 3) { this.price = this.mod[0] }
    else if (this.passengersAmount <=4 && this.luggage <= 4) { this.price = this.mod[1] }
    else {this.price = this.mod[2]}
    this.price = this.zipValue.value + this.price; 
  }

    onSubmit(form: NgForm) {
      console.log(form.value);
    }

  }

1 Ответ

3 голосов
/ 06 июля 2019

Измените это: 

zipValue: object;

На это: 

zipValue: {view: string, value: number};

Вы можете определить интерфейсы как встроенные типы в TypeScript.Вышесказанное - то же самое, что и следующее: 

interface ZipCode {
   view: string;
   value: number;
}

zip: ZipCode[] = [
  { view: '1010 - Innere Stadt', value: 24 },
  { view: '1020 - Leopoldstadt', value: 27 },
  { view: '1030 - Landstraße', value: 29 }
];

zipValue: ZipCode;

Я предпочитаю второй подход, а не первый.

...