字符串数组中的角向两种方式的数据绑定无法正常工作 [英] Angular two way data binding in string array doesn't works correctly

问题描述

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

My question is very simple, how to correctly use the ng-model in an array of strings?

我尝试过:

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>

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

This does not generate any errors, but when trying to change the contents of the inputs ... it does not work, it does not work correctly.

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

In the following StackBlitz the problem is shown when you try to edit a input: StackBlitz

这应该怎么做?

非常感谢！

推荐答案

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

You can use an auxiliar array (count) with the length equal length of 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>

这篇关于字符串数组中的角向两种方式的数据绑定无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！