Angular NgFor中NgModel的角度2-2路绑定

在Angular 2中，如何使用NgFor在重复列表中获得与NgModel的双向绑定。下面是我的plunkr和代码，但我得到一个错误

@组件({
选择器：“我的应用程序”，
模板：`
下面应该绑定到上面的输入框
{{item}}
`,
指令：[MdButton，MdInput]
})
导出类AppComponent{
toDos:字符串[]=[“Todo1”、“Todo2”、“Todo3”]；
构造函数（）{}
恩戈尼尼特（）{
}
}

在四处挖掘之后，我需要在ngFor上使用trackBy。更新了以下plnkr和代码。希望这能帮助别人

@组件({
选择器：“我的应用程序”，
模板：`
下面应该绑定到上面的输入框
{{item}}
`,
指令：[MdButton，MdInput]
})
导出类AppComponent{
toDos:字符串[]=[“Todo1”、“Todo2”、“Todo3”]；
构造函数（）{}
恩戈尼尼特（）{
}
trackByIndex（索引：编号，对象：任意）：任意{
收益指数；
}
}

由于两个原因，您所做的工作不起作用

• 您必须使用toDos[index]，而不是带有ngModel（）的项

---

• 每个输入必须具有唯一的名称

这是解决你问题的有效方法

<div>
<div *ngFor="let item of toDos;let index = index;">
  <input name=a{{index}} [(ngModel)]="toDos[index]" placeholder="item">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
  <label>{{item}}</label>
</div>

下面应该绑定到上面的输入框
{{item}}

试试这个

@Component({
  selector: 'my-app',
  template: `
  <div>
    <div *ngFor="let item of toDos;let index = index;">
  <input [(ngModel)]="item.text" placeholder="item.text">
    </div>
    Below Should be binded to above input box
    <div *ngFor="let item of toDos">
  <label>{{item.text}}</label>
    </div>
  </div>
  `,
  directives: [MdButton, MdInput]
   })
export class AppComponent { 
  toDos: any[] =[{text:"Todo1"},{text:"Todo2"},{text:"Todo3"}];
  constructor() {}
  ngOnInit() {
  }
}

@组件({
选择器：“我的应用程序”，
模板：`
下面应该绑定到上面的输入框
{{item.text}
`,
指令：[MdButton，MdInput]
})
导出类AppComponent{
toDos:any[]=[{text:Todo1}，{text:Todo2}，{text:Todo3}]；
构造函数（）{}
恩戈尼尼特（）{
}
}

您必须使用name+索引将name属性添加到ngModel中，以使其唯一

<mat-form-field
  #fileNameRef
  appearance="fill"
  color="primary"
  floatLabel="auto"
>
  <input
    matInput
    #fileNameCtrl="ngModel"
    name="originalName{{ index }}"
    [(ngModel)]="file.originalName"
    type="text"
    autocomplete="off"
    autocapitalize="off"
    readonly
  /> 
</mat-form-field>

您会收到一个错误，因为您无法执行此操作：```您无法将ng模型绑定到引用变量“item”。我不确定您试图实现什么。你能详细说明一下吗？没关系，我找到了需要包含trackByIndex的解决方案，然后绑定到toDos[index]。将很快更新plunkr。只需发布一个答案：-）实际上，

trackBy

在您的代码中并不重要！重要的是

[（ngModel）]=“toDos[index]”而不是
[（ngModel）]=“item”
@Lars如果没有trackBy，输入会失去焦点，似乎会影响我的体验。没有trackBy
ngFor
每当更改数组中的字符串时都会重新创建DOM，因此这是完全必要的。@Lars
trackBy:trackByIndex
在
中，角度会迫使您在输入上输入一个名称，在这种情况下，当修改字符串数组时，它将显示3次
“Todo3”
，但不会抛出错误，其他一切都将正常工作。您可以用
[ngmodelpoptions]=“{standalone:true}”
替换名称，这样您就可以在输入中获得所有3个不同的字符串。我搜索了多个问题，直到从这个问题中得到答案。我的问题是“每个输入必须有一个唯一的名称”。这正是我需要的！很高兴我也能帮上忙：）。节省了我很多时间。谢谢mate“每个输入都必须有一个唯一的名称”-这救了我。感谢男士“每个输入都必须有一个唯一的名称”为我修复了它。我的输入值在提交后消失，但现在它们保留在那里，因为每个输入都有不同的名称。非常感谢！否决投票的理由如下：1。不需要向数组添加密钥。也可以使用字符串数组来完成。所以冗余。2.“trackBy:trackByIndex；”在这种情况下是必需的，因为如果输入更改，它将更改“toDos”数组的值，从而重新呈现完整的“ngFor”。使用“trackBy:trackByIndex；”将不允许重新渲染，因为由于此代码，ngFor将仅在索引更改时重新渲染。@Tomerikoo谢谢。我编辑了我的答案。
@Component({
  selector: 'my-app',
  template: `
  <div>
    <div *ngFor="let item of toDos;let index = index;">
  <input [(ngModel)]="item.text" placeholder="item.text">
    </div>
    Below Should be binded to above input box
    <div *ngFor="let item of toDos">
  <label>{{item.text}}</label>
    </div>
  </div>
  `,
  directives: [MdButton, MdInput]
   })
export class AppComponent { 
  toDos: any[] =[{text:"Todo1"},{text:"Todo2"},{text:"Todo3"}];
  constructor() {}
  ngOnInit() {
  }
}

<mat-form-field
  #fileNameRef
  appearance="fill"
  color="primary"
  floatLabel="auto"
>
  <input
    matInput
    #fileNameCtrl="ngModel"
    name="originalName{{ index }}"
    [(ngModel)]="file.originalName"
    type="text"
    autocomplete="off"
    autocapitalize="off"
    readonly
  /> 
</mat-form-field>