Angular 4中实现三个表单输入值自动求和并填充至第四个输入框

嘿，我明白你遇到的问题了——你现在的代码里TSC只是在组件初始化的时候计算了一次总和，但当UDC、LDC或者ACC变化时，它不会自动重新计算，对吧？这是因为Angular不会主动监听普通变量的赋值变化来更新TSC，咱们得换个方式让总和能实时跟着输入变化。

问题根源 #

你原来的代码：

TSC: number=this.UDC+this.LDC+this.ACC;

这行代码只会在组件第一次实例化的时候执行一次，之后哪怕三个输入变量变了，TSC的值也不会自动刷新。

两种简单的解决方案 #

下面两种方法都适合Angular 4，选你觉得顺手的就行：

方法1：使用Getter（推荐新手，最简洁）

把TSC改成一个get属性，这样每次模板访问它的时候都会重新计算总和，自动同步最新值：

import { Component } from '@angular/core';

@Component({
  selector: 'app-capacity-calculator',
  templateUrl: './capacity-calculator.component.html'
})
export class CapacityCalculatorComponent {
  UDC: number = 0;
  LDC: number = 0;
  ACC: number = 0;

  // 用getter实时计算总和，处理空输入转0的情况
  get TSC(): number {
    return (this.UDC || 0) + (this.LDC || 0) + (this.ACC || 0);
  }
}

然后对应的模板代码，用双向绑定[(ngModel)]绑定变量，同时设置输入框为数字类型：

<div class="form-group">
  <label>Upper capacity:</label>
  <input type="number" [(ngModel)]="UDC" class="form-control" placeholder="Enter number">
</div>
<div class="form-group">
  <label>Lower capacity:</label>
  <input type="number" [(ngModel)]="LDC" class="form-control" placeholder="Enter number">
</div>
<div class="form-group">
  <label>Ac capacity:</label>
  <input type="number" [(ngModel)]="ACC" class="form-control" placeholder="Enter number">
</div>
<div class="form-group">
  <label>Total capacity:</label>
  <input type="number" [value]="TSC" disabled class="form-control">
</div>

这里Total capacity输入框用[value]绑定TSC，并设置disabled防止用户手动修改，因为它是计算出来的结果。

方法2：通过输入事件触发计算

如果你需要在计算总和时做额外逻辑（比如验证、日志），可以给每个输入框添加input事件，手动触发求和函数：

TS代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-capacity-calculator',
  templateUrl: './capacity-calculator.component.html'
})
export class CapacityCalculatorComponent {
  UDC: number = 0;
  LDC: number = 0;
  ACC: number = 0;
  TSC: number = 0;

  calculateTotal(): void {
    // 同样处理空输入，避免NaN
    this.TSC = (this.UDC || 0) + (this.LDC || 0) + (this.ACC || 0);
  }
}

模板代码，每个输入框绑定input事件：

<div class="form-group">
  <label>Upper capacity:</label>
  <input type="number" [(ngModel)]="UDC" (input)="calculateTotal()" class="form-control" placeholder="Enter number">
</div>
<div class="form-group">
  <label>Lower capacity:</label>
  <input type="number" [(ngModel)]="LDC" (input)="calculateTotal()" class="form-control" placeholder="Enter number">
</div>
<div class="form-group">
  <label>Ac capacity:</label>
  <input type="number" [(ngModel)]="ACC" (input)="calculateTotal()" class="form-control" placeholder="Enter number">
</div>
<div class="form-group">
  <label>Total capacity:</label>
  <input type="number" [(ngModel)]="TSC" disabled class="form-control">
</div>

注意点 #

• 用type="number"能限制输入框只能输入数字，同时移动端会弹出数字键盘，提升体验。
• 加上(this.UDC || 0)是为了处理输入框为空的情况，避免NaN（空输入时ngModel会把变量设为NaN，相加会得到NaN）。

内容的提问来源于stack exchange，提问作者Karthik