Angular 7，双向数据绑定

Posted 2023-03-25

【中文标题】Angular 7，双向数据绑定

【英文标题】：Angular 7, two-way data binding

【发布时间】：2021-11-18 10:19:21

【问题描述】：

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

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

【问题讨论】：

你能放一些你想要实现的图像吗？还是多一点解释？

背景色的宽度？ html 元素有宽度，CSS 属性没有。

没有像width of background color这样的东西。

【参考方案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