Question

我的问题很简单，如何在字符串数组中正确使用ng-model？

我尝试过：

Component.ts

toDos: string[] =["Todo1","Todo2","Todo3"];

Component.html

<div *ngFor="let item of toDos;let index = index">
   <input [(ngModel)]="toDos[index]" placeholder="item" name="word{{index}}">
</div>

这不会产生任何错误，但是在尝试更改输入内容时……不起作用，它将无法正常工作。

在以下StackBlitz中，当您尝试编辑输入时会显示此问题： StackBlitz

这应该怎么做？

非常感谢您！

Answer 1

您的代码看起来正确，希望可以帮助您找出问题的主要原因

https://stackblitz.com/edit/angular-cw4we8?embed=1&file=src/app/app.component.html

Answer 2

您可以使用长度等于toDos长度的辅助数组（计数）

toDos: string[] =["Todo1","Todo2","Todo3"];
count:number[]=new Array(this.toDos.length); //An auxiliar array
click(){
   this.toDos.push("Todo4");
   //if change the length of array ToDo, we must change the array count
   this.count=new Array(this.toDos.length)
}

<!--we iterate over count array-->
<div *ngFor="let item of count;let index = index">
   <input [(ngModel)]="toDos[index]" placeholder="item" name="word{{index}}">
</div>

Answer 3

您可以像在for循环中那样简单地使用该项目，它将值保留在该项目中

字符串数组中的角度双向数据绑定无法正常工作

3 个答案: