Angular2 不能以 ngFor 重复的形式使用 ngModel

Question

如何将 ngModel 用于由 ngFor 重复的多种形式的输入？

Angular2 在我尝试这样做时出错。

错误：访问权限被拒绝 属性 "rejection"

有问题的代码示例块：

<div *ngFor="let item of items">
    <form name="itemForm">
        {{item.name}}<input [(ngModel)]="item.name">
    </form>
</div>

这是个笨蛋 https://plnkr.co/edit/YNZiCBeyqJoxO5ox5nlC?p=preview

如果我删除表单标签，这一切运行都没有问题，但我需要它，所以我可以在所有输入上使用回车键来更新自己表单中的相应数据。

Answer 1

如果在表单标签中使用 ngModel，则必须设置 name 属性，或者必须将表单控件定义为 ngModelOptions 中的 'standalone'。

以下将无任何错误：

<div *ngFor="let item of items">
  <form name="itemForm">
    {{item.name}}<input [(ngModel)]="item.name" [ngModelOptions]="{standalone: true}">
  </form>
</div>

Answer 2

正如@ranakrunal9 所指出的，您可以为输入使用唯一名称 属性。这里的代码：

<div *ngFor="let item of items; let index=index">
    <form name="itemForm">
        {{item.name}}<input [(ngModel)]="item.name" name={{index}}>
    </form>
</div>

Angular2 不能以 ngFor 重复的形式使用 ngModel

Angular2 can't use ngModel in form repeated by ngFor

forms

typescript

angular2-ngmodel

ngfor

angular