Angular模板驱动表单中插值赋值input的value不生效是什么原因

• Angular模板的表达式上下文默认绑定当前组件实例，模板语法中不存在JS语境下的this关键字。你写的this.title实际上是尝试访问组件上名为this的对象属性下的title字段，而非直接访问组件本身的title属性，这是导致插值绑定失效的核心原因。
• 你观察到的[(ngModel)]加this仍然生效属于非预期的巧合情况，不属于Angular官方支持的规范写法，后续迭代大概率会出现绑定异常。

1. 模板写法修正 #

模板中访问组件属性不需要加this前缀，同时如果使用模板驱动表单，所有绑定ngModel的表单控件必须添加name属性，这是Angular表单模块的强制要求。修正后代码如下：

// 组件类无需修改
export class IdComponent implements OnInit {
      title : String = "Edit user";
// 其余代码省略
}

<form>
    <input type="text" id="title1" name="title1" [(ngModel)]="title">
    <input type="text" id="title2" value="{{ title }}">
</form>

2. 可选优化 #

给input赋值也可以用属性绑定写法，和插值效果完全等价，更符合Angular的绑定风格：

<input type="text" id="title2" [value]="title">

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