Question

对ngModel的值使用ngFor是不可能（或者不可能）？ 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：无法重新分配变量绑定名称

我也尝试绑定到数组，这种......有点工作，但劫持焦点并引发异常：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

修改

我可以使用更直接的方法解决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>

Answer 2

解决方案是通过索引引用protocol Copyable { init(copy: Self) } extension Copyable { func copy() -> Self { return Self.init(copy: self) } } class Person: Copyable{ var name: String var age: Int init(name: String, age: Int) { self.name = name self.age = age } required init(copy: Person) { self.name = copy.name self.age = copy.age } } let john = Person(name: "John", age: 30) let johnsClone = john.copy()内的值。因此ngModel。

但这还不够，因为[(ngModel)]="names[index]"按值跟踪项目。一旦值更改，就无法跟踪旧值。因此，我们需要更改跟踪函数以返回索引，即*ngFor。

此问题已解释为here。

<强>解决方案：

trackBy: trackByIndex

针对ngFor变量的Angular2 ngModel

2 个答案: