在不单击 Angular 输入的情况下更新值

Question

我觉得有点混乱，所以我需要一些帮助。当我为输入的金额输入一个值时，我已经设法让所有更改发生，但我想在货币价值发生变化时自动更新 kWh 和 Impact 的值，而无需单击任何地方。

component.ts

import { Component, OnInit } from '@angular/core';
import { StaticPagesService } from '../../shared/static-pages.service';
import { EventsService } from '../../shared/events.service';
import { ScrollService } from '../../shared/scroll.service';

@Component({
  selector: 'app-save-and-donate',
  templateUrl: './save-and-donate.component.html',
  styleUrls: ['./save-and-donate.component.scss']
})
export class SaveAndDonateComponent implements OnInit {

  money = 10; kwh = 0; impact = ''; tips; kwhPrice: number;

  isCollapsed = true;

  constructor(
    private staticPagesService: StaticPagesService,
    private eventsService: EventsService,
    private scrollService: ScrollService
  ) { }

  ngOnInit() {
    this.scrollService.scrollToTop();
    this.staticPagesService.getKwhPrice().subscribe((kwhPrice: any) => {
      this.kwhPrice = kwhPrice.attributes.value;
      this.kwh = Math.round(this.money / this.kwhPrice);
      this.updateImpact();
    });
  }

  changeMoney() {
    this.updateKwh();
    this.updateImpact();
  }

  changeKwh() {
    this.updateMoney();
    this.updateImpact();
  }

  updateMoney() {
    this.kwhPrice > 0 ? this.money = Math.round(this.kwh * this.kwhPrice) : this.money = 0;
  }

  updateKwh() {
    this.kwhPrice > 0 ? this.kwh = Math.round(this.money / this.kwhPrice) : this.kwh = 0;
  }

  updateImpact() {
    this.eventsService.getDefaultImpacts(this.kwh).subscribe(impacts => {
      this.impact = impacts.home;
    });
  }


  moneyCheck() {
    if (this.money > 30) {
      setTimeout(() => {
        this.money = 30;
        this.changeMoney();
      }, 2000);
    } else {
      this.changeMoney();
    }
  }
}

component.html

<app-banner></app-banner>
<section id="sg-how-it-works" class="bg-gray">
  <div class="container">
    <h3>{{ 'saveDonate.firstHeader' | translate }}</h3>
    <div class="row text-center">
      <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="tab">
          <h1>1</h1>
          <h4 class="same-height" style="height: 66px;" [innerHTML]="'saveDonate.s1' | translate"></h4>
        </div>
        <hr>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="tab">
          <h1>2</h1>
          <h4 class="same-height" style="height: 66px;" [innerHTML]="'saveDonate.s2' | translate"></h4>
        </div>
        <hr>
      </div>
    </div>
    <div class="row text-center">
      <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="tab">
          <h1>3</h1>
          <h4 class="same-height" style="height: 66px;" [innerHTML]="'saveDonate.s3' | translate"></h4>
        </div>
        <hr>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="tab">
          <h1>4</h1>
          <h4 class="same-height" style="height: 66px;" [innerHTML]="'saveDonate.s4' | translate"></h4>
        </div>
        <hr>
      </div>
    </div>
  </div>
</section>
<div class="form-horizontal form">
  <section id="amount-equals-to-impact" class="bg-secondary">
    <div class="container">
      <div *ngIf="money > 30" id="30-dollars-flash" class="txt-center">
          {{ 'saveDonate.tipsWarning' | translate }}
      </div>
      <div class="row dollar-energy-marketing-tip">
        <div class="col-md-3 col-sm-4 col-xs-5">
          <label>{{ 'saveDonate.ammount' | translate }}</label>
          <br>
          <div class="input-group">
            <span class="input-group-addon bree">&nbsp;&nbsp;€</span>
            <input id="dollars-marketing form-control" type="text" [(ngModel)]="money"  (change)="moneyCheck()">
          </div>
        </div>
        <div class="col-md-3 col-sm-8 col-xs-7">
          <label>{{ 'saveDonate.equals' | translate }}</label>
          <br>
          <div class="input-group">
            <input class="txt-right" id="kwh-marketing form-control" type="text" [(ngModel)]="kwh" (change)="changeKwh()">
            <span class="input-group-addon bree">&nbsp;kWh&nbsp;&nbsp;&nbsp;&nbsp;</span>
          </div>
        </div>
        <div class="col-md-3 col-sm-12 col-xs-12">
          <label class="abv-in">{{ 'saveDonate.impact' | translate }}</label>
          <br>
          <input type="text" rel="days-marketing" [(ngModel)]="impact" disabled="disabled">
        </div>
        <div class="col-md-3 col-sm-12 col-xs-12">
          <button class="btn btn-lg-black" [ngx-scroll-to]="'#snd-tips'" [disabled]="money > 30" (click)="tips.changeMoney(money)">{{ 'saveDonate.tips' | translate }}</button>
        </div>
      </div>
    </div>
  </section>
  <div id="snd-tips">
    <app-tips #tips [money]="money" [number]="5"></app-tips>
  </div>
</div>
<section id="snd-energize-lives" class="bg-white">
  <div class="container">
    <div class="row">
      <div class="col-md-12 center">
        <a class="btn btn-lg-orange" [ngx-scroll-to]="'#featured-events'" (click)="isCollapsed = !isCollapsed">{{ 'saveDonate.energizeLives' | translate }}</a>
      </div>
    </div>
  </div>
</section>
<app-events-widget [collapse]="isCollapsed" [money]="money"></app-events-widget>
<section id="two-choices" class="bg-gray">
  <div class="container">
    <div class="row center">
      <div class="col-md-4 col-sm-4 col-xs-12">
        <div class="suggestion">
          <h2 [innerHTML]="'motos.becomeAmbassador.title' | translate"></h2>
          <a class="btn btn-lg btn-underlined" routerLink="/become_an_ambassador">{{ 'motos.becomeAmbassador.label' | translate }}</a>
        </div>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-12">
        <div class="suggestion">
          <h2 [innerHTML]="'motos.smartGiving.title' | translate"></h2>
          <a class="btn btn-lg btn-underlined" routerLink="/smart_giving">{{ 'motos.smartGiving.label' | translate }}</a>
        </div>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-12">
        <div class="suggestion">
          <h2 [innerHTML]="'motos.saveAndDonate.title' | translate"></h2>
          <a class="btn btn-lg btn-underlined" routerLink="/save_and_donate">{{ 'motos.saveAndDonate.label' | translate }}</a>
        </div>
      </div>
    </div>
  </div>
</section>
<app-contact-form></app-contact-form>

我附上了应用程序的屏幕截图，以便您轻松了解发生了什么。

img1

我想要的是 "That equals" 和 "Your impact is" 表单在 "Set the amount" 输入中键入值时自动更新。

非常感谢

Answer 1

您可以在 TS 文件上使用 HTML onChange 事件，例如 (ngModelChange)=myFunction() 和 myFunction()，然后调用更新值的函数。由于您使用的是 NgModel，因此应该自动更新这些值。

在不单击 Angular 输入的情况下更新值

Update the values without clicking in Angular input

input

auto-update

angular