Angular 7，双向数据绑定答案

【问题标题】：Angular 7, two-way data bindingAngular 7，双向数据绑定
【发布时间】：2021-11-18 10:19:21
【问题描述】：

我有一个输入框，用户可以输入数字，根据该数字我想设置背景颜色的宽度。

框宽度将被修复我只想根据用户输入的数字更改背景颜色的宽度

【问题讨论】：

你能放一些你想要实现的图像吗？还是多一点解释？
背景色的宽度？ HTML 元素有宽度，CSS 属性没有。
没有像width of background color这样的东西。

标签： css angular dynamic data-binding styles

【解决方案1】：

您可以使用线性渐变 (Demo)：

  <input
    type="number"
    [(ngModel)]="width"
    [style.background]="
      'linear-gradient(to right, red ' + width + '%, transparent 0)'
    "
  />

参考：CSS Background-Size doesn't work with static color

【讨论】：