如何在ANGULAR中实现百分比的动态均分功能？

核心逻辑说明 #

• 实时监听txtBox1的输入变化，提取纯数值（自动去除%符号）
• 计算剩余百分比：100 - txtBox1输入数值
• 将剩余值均分到txtBox2和txtBox3，自动添加%符号
• 加入输入合法性校验，避免非数字或超出0-100范围的异常情况

完整代码实现 #

1. 模板文件（app.component.html） #

<div class="input-group">
  <label>txtBox1:</label>
  <input type="text" [(ngModel)]="txt1" (input)="updateSplitPercentages()" placeholder="输入百分比，如75%">
</div>
<div class="input-group">
  <label>txtBox2:</label>
  <input type="text" [(ngModel)]="txt2" readonly>
</div>
<div class="input-group">
  <label>txtBox3:</label>
  <input type="text" [(ngModel)]="txt3" readonly>
</div>

2. 组件类文件（app.component.ts） #

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  txt1: string = '';
  txt2: string = '';
  txt3: string = '';

  updateSplitPercentages() {
    // 提取输入中的纯数字，去除%符号
    const inputValue = parseFloat(this.txt1.replace('%', ''));
    
    // 校验输入合法性：必须是0-100之间的有效数字
    if (isNaN(inputValue) || inputValue < 0 || inputValue > 100) {
      this.txt2 = '';
      this.txt3 = '';
      return;
    }

    // 计算剩余百分比并均分
    const remainingPercent = 100 - inputValue;
    const splitValue = remainingPercent / 2;

    // 赋值并格式化显示（保留两位小数）
    this.txt2 = `${splitValue.toFixed(2)}%`;
    this.txt3 = `${splitValue.toFixed(2)}%`;
  }
}

3. 模块配置（app.module.ts） #

必须导入FormsModule才能使用ngModel双向绑定：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

关键细节说明 #

• 使用(input)事件实现实时响应，输入变化立即触发计算
• replace('%', '')兼容带%和不带%的输入格式
• toFixed(2)控制百分比的小数位数，可根据需求调整为0或其他位数
• 将txt2和txt3设置为readonly，防止用户手动修改拆分结果

按照上述代码实现后，就能达到你想要的效果：输入75%时，txt2和txt3自动显示12.5%；输入50%时，两者均显示25%，所有变化实时动态更新。

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