如何使用Angular 7 two-way data binding 按输入数值调整背景色宽度

核心实现逻辑：通过[(ngModel)]双向绑定输入框的输入值，再将该值动态绑定到背景元素的宽度样式属性即可。

1. 前置依赖配置 #

使用Angular双向绑定前，需要确保当前组件所属的模块已导入FormsModule，否则双向绑定会失效：

// 对应模块文件，如app.module.ts
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], // 加入到imports数组
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 组件类逻辑编写 #

在对应组件的ts文件中定义双向绑定用到的变量，可根据需求增加数值范围校验逻辑：

// 对应组件文件，如app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 双向绑定的输入值，默认值为0
  public inputWidth: number = 0;
  // 外层盒子固定宽度，单位px，可按需修改
  public readonly outerFixedWidth: number = 500;

  // 可选：添加setter自动修正非法输入值
  // private _inputWidth: number = 0;
  // get inputWidth(): number {
  //   return this._inputWidth;
  // }
  // set inputWidth(val: number) {
  //   // 限制数值在0-100范围内（适配百分比宽度逻辑）
  //   this._inputWidth = Math.max(0, Math.min(100, Number(val) || 0));
  // }
}

3. 模板代码编写 #

通过[(ngModel)]绑定输入框与变量，再用属性绑定动态设置背景元素的宽度：

<!-- 对应组件模板文件，如app.component.html -->
<!-- 输入框区域 -->
<div>
  <label>输入背景宽度占比（0-100）：</label>
  <input type="number" min="0" max="100" [(ngModel)]="inputWidth" placeholder="请输入数值">
</div>

<!-- 展示区域 -->
<div class="outer-box" [style.width.px]="outerFixedWidth">
  <!-- 动态调整宽度的背景元素，这里用百分比宽度，也可根据需求改为px单位 -->
  <div class="background-bar" [style.width.%]="inputWidth"></div>
</div>

如果你需要用输入值作为绝对宽度（单位px），只需要把[style.width.%]改为[style.width.px]，同时调整输入框的max属性为outerFixedWidth的值即可。

4. 样式补充 #

/* 对应组件样式文件，如app.component.css */
.outer-box {
  height: 32px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 12px;
}

.background-bar {
  height: 100%;
  background-color: #1677ff; /* 可替换为你需要的背景色 */
  transition: width 0.2s ease; /* 可选，添加过渡动画效果更流畅 */
}

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