双向数据绑定输入字段在填充输入字段时最初会重复值答案

【问题标题】：Two-way data bound input field initially duplicates values when populating input field双向数据绑定输入字段在填充输入字段时最初会重复值
【发布时间】：2017-09-28 02:42:28
【问题描述】：

我试图让用户能够重命名字段并让数据填充整个应用程序。我有这个代码：

<label>Constraint titles: </label>
<li *ngFor="let slider of twodsliders">
  <input [(ngModel)]="slider.name" name="consname" type="text" size="30" placeholder="Max Frogs"><br>
</li>

有了这个模拟数据：

const TWODSLIDERS: TwoDSlider[] = [
  { id: 1, name: 'Unknowability Bounderies', max_value: 89, min_value: 22 },
  { id: 2, name: 'Acceptable Throwing Distance', max_value: 67, min_value: 11 }
];

应用组件中的这个：

twodsliders = TWODSLIDERS;

虽然数据绑定到正确的值，因此更改第一个输入值会更改第一个模型上的值，更改第二个输入值会更改第二个模型，依此类推，第一次填充数据时会出现问题.也就是说，输入框最初都包含值“可接受的投掷距离”。这里出了什么问题？

【问题讨论】：

标签： angular loops data-binding ngfor 2-way-object-databinding

【解决方案1】：

在我发布问题时回答了我的问题，但还是出于提供信息的目的发布了。解决方案是将name="{{slider.name}}" 添加到输入元素。然后它会立即填充正确的版本。

但是，这会导致额外的意外行为（删除输入字段中的所有数据会导致错误），因此我完全删除了名称字段，而是添加了[ngModelOptions]="{standalone: true}"。应用现在似乎按预期运行。

【讨论】：