我觉得有点困惑，所以在这里我需要一些帮助。 当我键入输入金额的值时，我设法使更改发生了，但是我想在货币值更改时自动更新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"> €</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"> kWh </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>
我附上了该应用程序的屏幕截图，以便您可以轻松了解正在发生的事情。
我想要的是“等于”和“您的影响是”表格，以便在“设置金额”输入中键入值时自动更新。
非常感谢
答案 0 :(得分：0)
您可以使用HTML onChange事件，例如(ngModelChange)=myFunction()和TS文件上的myFunction()，然后调用更新值的函数。由于您使用的是NgModel，因此应该自动更新值。
