更新数组模型取消选择迭代的 <Input> 元素答案

【问题标题】：Updating array model deselects iterated <Input> elements更新数组模型取消选择迭代的 <Input> 元素
【发布时间】：2017-03-14 22:11:28
【问题描述】：

尝试实现添加/删除子项条目；递增/递减按钮将槽添加到数组中，并自动添加/删除输入字段：

<div *ngFor="let item of itemsInNewOrder; let i = index">
  <input [(ngModel)]="itemsInNewOrder[i]" xtype="text" name="order" title="order" />
</div>

这在功能上是有效的，但是每次在输入中输入一个字母时，该元素都会被取消选择，并且必须再次单击才能再输入一个字母。我该如何解决这个问题？

【问题讨论】：

标签： javascript html arrays angular

【解决方案1】：

http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

上面的链接解释了 Angular 2 中的变更检测。它还描述了一些您可能会发现有用的其他变更检测策略。

基本上，由于您将[(ngModel)]="itemsInNewOrder[i]" 绑定到itemsInNewOrder 数组，因此Angular 试图提供帮助并为您更新视图。

每次击键都会更新您的模型 (itemsInNewOrder)
Angular 检测到更新
Angular 使用新的表单控件再次呈现视图
同样，这些是新的表单控件，因此用户还没有集中注意力。这就是为什么您必须在每个输入的字符后单击控件。

您可以通过删除您的 2 路绑定并改为监听每个输入的模糊事件或实现上面链接中描述的内容来解决此问题。

模糊事件监听示例：

<input (blur)="blurHandler(item,i)" type="text" name="order" title="order" />

组件

blurHandler(val:string,ndx:number) {
  this.itemsInNewOrder[ndx] = val;
}

这可能也有帮助

Angular 2 change event - model changes

【讨论】：

没用，我认为是因为这些 html 命令仍在被更改检测器监视。然而，在分离、执行操作和重新附加之后，数据被删除并更新了 UI。还是不知所措。我无法想象制作嵌套输入是一项新的尝试，但我无法在任何地方找到任何提及。

【解决方案2】：

您还可以将值包装到对象中。我不知道你这样做为什么不会失去焦点。

组件：

itemsInNewOrder = [{value: 'Soda'}, {value: 'Burger'}, {value: 'Fries'}];

模板：

<div *ngFor="let item of itemsInNewOrder; let i = index">
    <input 
      type="text" 
      name="order" 
      title="order" 
      [(ngModel)]="itemsInNewOrder[i].value"/>
  </div>

【讨论】：

【解决方案3】：

对此最简单的答案是我需要学习和实现 Angular 2 的 reactive forms 库，它是 Angular 2 的一部分。使用它，我没有遇到任何困难。

【讨论】：