javascript - 针对 ngFor 变量的 Angular2 ngModel

Question

是否不可能(或还不可能)对来自 ngFor 的值使用 ngModel？ Angular 是否试图保护我免受不良性能的影响？

效果很好:http://jsfiddle.net/langdonx/n5pjgev6/

<input type="text" [(ng-model)]="value">{{value}}

效果不是很好:http://jsfiddle.net/langdonx/n5pjgev6/1

<li *ng-for="#name of names">
    <input type="text" [(ng-model)]="name">{{name}}
</li>

EXCEPTION: Cannot reassign a variable binding name

我也尝试绑定(bind)到数组，这...有点管用，但会劫持焦点并引发异常:http://jsfiddle.net/langdonx/n5pjgev6/2/

<li *ng-for="#name of names; #i = index">
    <input type="text" [(ng-model)]="names[i]">{{name}}
</li>

EXCEPTION: LifeCycle.tick is called recursively

编辑:

我可以使用更直接的方法解决 LifeCycle.tick 问题，但焦点仍然被盗，因为 ngFor 重绘了一些东西:http://jsfiddle.net/langdonx/n5pjgev6/3/

<li *ng-for="#name of names; #i = index">
    <input type="text" [value]="names[i]" (input)="names[i] = $event.target.value">{{names[i]}}
</li>

Answer 1

我认为 ngFor 不喜欢跟踪数组元素，这些元素是具有 ngModel 的原始值。

如果您删除循环内的 ngModel，它会起作用。

当我 update jsfiddle 时它也有效与:

this.names = [{name: 'John'}, {name: 'Joe'}, {name: 'Jeff'}, {name: 'Jorge'}];

和

<li *ng-for="#n of names"><input type="text" [(ng-model)]="n.name">{{n.name}}</li>