Angular 4中能否将ngModel表达式设为数字形式？

这个问题我之前处理过，本质是JavaScript/TypeScript的对象属性访问语法规则限制导致的～

为什么会报错？ #

在JavaScript/TypeScript里，对象的属性名如果是数字或者以数字开头的字符串，是不能用.（点语法）直接访问的。Angular的模板解析器遵循同样的语法规则，所以你写的coeffHour.01会被解析器误判：它把.01当成了数字字面量（比如0.01），而非属性名，因此抛出了Parser Error。

解决方法 #

这里有两种可行的处理方式：

1. 使用方括号语法访问属性

直接在模板里把点语法改成方括号语法，属性名用字符串包裹：

<input name="01" required type="number" min="0" step="0.1" [(ngModel)]="coeffHour['01']" />

对应的组件类中访问该属性时，也要用同样的方式：

// 组件类示例
coeffHour = {
  '01': 1.2,
  // 其他属性...
};

// 访问属性
const value = this.coeffHour['01'];

2. 修改属性名为合法标识符（推荐）

如果你的coeffHour对象结构是可控的，建议把属性名改成符合JavaScript标识符规范的名称，比如以字母开头：

// 修改后的对象结构
coeffHour = {
  hour01: 1.2,
  hour02: 1.5,
  // 其他属性...
};

这样模板里就能正常使用点语法了：

<input name="hour01" required type="number" min="0" step="0.1" [(ngModel)]="coeffHour.hour01" />

这种方式更符合常规编码习惯，后续维护也更方便。

额外提醒 #

注意你在代码里同时使用了formControlName和ngModel，在Angular中这两种绑定方式通常不建议混用（除非是特定的混合表单场景）。如果是用响应式表单，直接通过formControlName="01"绑定到表单控件即可，不需要再添加ngModel，这样能避免潜在的冲突问题。

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