Angular中如何为number类型ngModel绑定值追加'kg'字符串？

嘿，这个需求我之前也碰到过——毕竟type="number"的输入框浏览器管得很严，没法直接把字符串和数字混在输入框里绑定ngModel。不过咱们有几个巧妙的办法，既能视觉上显示'kg'，又不破坏数字绑定的逻辑：

这种方法几乎不用改原有HTML结构，纯靠CSS给输入框“补”上kg标识，输入框本身还是只处理数字，完全不影响ngModel的绑定逻辑。

先给你的input套个父容器，再添加CSS伪元素：

<div class="input-with-unit">
  <input 
    (click)="singleClickForTraining(set)" 
    [ngClass]="{ currentExe : currentSet === set }" 
    [(ngModel)]="set.reps" 
    class="input-invisible-for-sets" 
    type="number"
  >
</div>

对应的CSS样式：

.input-with-unit {
  position: relative;
  display: inline-block;
}

/* 用伪元素在输入框右侧添加kg */
.input-with-unit::after {
  content: 'kg';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* 点击kg文字不会干扰输入框 */
  color: #666; /* 可以调整颜色和输入数字区分开 */
}

/* 给输入框加右边内边距，避免数字和kg重叠 */
.input-invisible-for-sets {
  padding-right: 30px;
}

如果需要给单位单独设置样式，或者要在某些场景下隐藏单位，可以把输入框和kg文本放在一个模拟输入框的容器里：

<div class="input-container">
  <input 
    (click)="singleClickForTraining(set)" 
    [ngClass]="{ currentExe : currentSet === set }" 
    [(ngModel)]="set.reps" 
    class="input-invisible-for-sets" 
    type="number"
  >
  <span class="unit">kg</span>
</div>

配套的CSS：

.input-container {
  border: 1px solid #ccc;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
}

.input-invisible-for-sets {
  border: none;
  outline: none;
  flex: 1;
  padding: 8px 0;
}

.unit {
  color: #666;
  margin-left: 4px;
}

千万别尝试直接把set.reps改成字符串（比如set.reps + 'kg'），type="number"的输入框会直接拒绝非数字值，不仅ngModel绑定会失效，用户输入时也会出各种问题。上面两种方案都保持了set.reps的数字类型，完全不影响后续的业务计算逻辑。

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