Angular 中的“Value”属性不会应用于 <input> 标签

Question

我正在制作向导表单。该表格有多个步骤（个人、地址...）。所有这些步骤都表示包装在父组件中的子组件，该父组件使用 NgRx Store 来保存用户输入的数据。

目标是每次用户想要返回向导表单时加载该数据。 NgRx 的所有逻辑都有效，但我不明白为什么如果我对同一个

[(ngModel)]

标签使用

<input>

，应用于标签的“值”属性不起作用。

这是一段代码：

<input
      type="text"
      placeholder="name"
      value="{{inputData.name}}"
      [(ngModel)]="inputDataTemplate.name"
      (ngModelChange)="updateName(inputDataTemplate.name)"
/>

inputData 

是一个 Observable，显示来自 NgRx Store 的数据。

如果

<input>

不包含

[(ngModel)]

和

(ngModelChange)

属性，则显示数据：

<input
      type="text"
      placeholder="name"
      value="{{inputData.name}}"
/>

Answer 1

<input
  type="text"
  placeholder="name"
  [(ngModel)]="inputData.name"
  (ngModelChange)="updateName(inputDataTemplate.name)"/>

[(ngModel)] 用于 2 路绑定。输入字段使用 ngModel 变量的默认值呈现。如果您更改输入字段值，它会自动更新 ngModel 变量。确保您为 ngModel 绑定使用正确的变量名称。

Answer 2

从输入字段中删除 value 属性，并仅使用 [(ngModel)] 进行双向绑定。

在组件中

// Assuming you have an observable like inputData$
inputData$.subscribe(data => {
  this.inputDataTemplate.name = data.name;
});

模板

<input
  type="text"
  placeholder="name"
  [(ngModel)]="inputDataTemplate.name"
  (ngModelChange)="updateName(inputDataTemplate.name)"
/>