Угловая двусторонняя привязка данных в строковом массиве не работает правильно

Question

У меня очень простой вопрос, как правильно использовать ng-модель в массиве строк?

Я пробовал это:

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

Вы можете использовать вспомогательный массив (count) с длиной, равной длине 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 он будет содержать значение в элементе