Angular 双向绑定在模板驱动的表单中不起作用

Question

我正在尝试从我的模板驱动表单中的 class 中读取属性，但无法使其正常工作。这是我的 class:

...
export class IdComponent implements OnInit {
      title : String = "Edit user";
...

这是我的表格

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

第一个输入有效，但第二个无效。我究竟做错了什么？这是一个证据

enter image description here

Answer 1

您的 html 应如下所示：

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

或者换句话说，您需要添加 name 属性以使用 [(ngModel)]

输入

Answer 2

尝试从 [(ngModel)] 中删除 'this.' 并且值只保留简单的“标题”

[(ngModel)]="title"
[value]="title"

Angular two-way binding not woking in template-driven forms