Как передать переменную ts на странице html на страницу ts, затем выполнить некоторые вычисления и передать их обратно на страницу html? - PullRequest
Новая
       7

Как передать переменную ts на странице html на страницу ts, затем выполнить некоторые вычисления и передать их обратно на страницу html?

0 голосов
/ 20 июня 2020

Я пытаюсь принять сумму для транзакции в качестве ввода от пользователя, вычесть ее из кошелька пользователя, а затем отобразить обновленный кошелек. В кошелек уже загружено 100 денежных единиц. Но когда я запускаю приложение, отображается только 100, а изменения не отражаются. что мне делать ? Вот мой код html 

<ion-row>
              <ion-col class="txt2" size="6"  text-left >Company<br><ion-text class="bal">Balance    & gms</ion-text>
              </ion-col>
              <ion-col class="text2" size="6" text-right ><ion-item><ion-input type="number" value="{{ wallet }}" [(ngModel)]="wallet"  class="ion-text-end"></ion-input>
              </ion-item>
              </ion-col>
            </ion-row>
<ion-item class="transact-display">
                <ion-input type="number"  placeholder="Enter amount" [(ngModel)]="amount"  name="amount"></ion-input>
              </ion-item>
<ion-button class="transact"  type="submit" expand="block"  (click)="transact()">Transact</ion-button>

Файл ts 

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-transaction',
  templateUrl: './transaction.page.html',
  styleUrls: ['./transaction.page.scss'],
})
export class TransactionPage implements OnInit {

  constructor(public router : Router) {}

  wallet: number = 100;
  amount: number ;
  ngOnInit() {

  }

  transact() {
    this.router.navigateByUrl('/congratulation');
      this.wallet = this.wallet - this.amount;
      return this.wallet;





  }


}

Фактическое поведение: Нет изменений в отображаемой сумме. 100 отображается только после нажатия кнопки Transact.

Ожидаемое поведение: при первом входе пользователя в систему должно отображаться 100. Когда пользователь совершает транзакцию, скажем, 20, из 100 следует вычесть 20 и отобразить 80.

1 Ответ

0 голосов
/ 20 июня 2020

Angular - это фреймворк для двусторонней привязки данных: Используйте Angular интерполяцию:

. html

<ion-item>
     {{wallet}}
</ion-item>

<ion-item class="transact-display">
      <ion-input type="number"  placeholder="Enter amount" [(ngModel)]="amount"  name="amount"></ion-input>
</ion-item>

<ion-button class="transact"  type="submit" expand="block"  (click)="transact()">Transact</ion-button>

.ts 

wallet: number = 100;
  amount: number ;
  ngOnInit() {

  }

  transact() {
      this.wallet = this.wallet - this.amount;   // this will update wallet automatically. 
      this.router.navigateByUrl('/congratulation');
  }
...