javascript - 更新数组模型取消选择迭代的 元素

Question

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

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

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

Answer 1

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

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

基本上因为你做了一个 2 方式绑定(bind) [(ngModel)]="itemsInNewOrder[i]" 到 itemsInNewOrder 数组，Angular 试图提供帮助和更新适合你的观点。

1. 每次击键都会更新您的模型 (itemsInNewOrder)
2. Angular 检测更新
3. Angular 使用新的表单控件再次呈现 View
4. 同样，这些是新的表单控件，因此用户尚未关注其中一个。这就是为什么您必须在输入每个字符后单击进入控件的原因。

您可以通过删除双向绑定(bind)来解决此问题，而不是监听每个输入的模糊事件或实现上面链接中描述的内容。

Blur事件监听示例:

<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