带双向数据绑定Angular2的嵌套ngFor

Question

我尝试在嵌套ngFor和双向数据绑定的帮助下制作一个输入字段表。 我几乎实现了这一点，但是使用双向数据绑定的某些操作是错误的，我找不到问题。

所以，这就是我想要的-我希望能够输入每个单词的字母。

我有此表，可以键入，但是如果我在第一个单元格中键入，则在第二个中出现相同的值，如果我在第三个单元中键入，则值也出现在第4位和第5位...而且我无法理解为什么，我想问题在于这条线

<input maxlength="1" size='5' name="{{i}}{{j}}" [(ngModel)]="helper[i][j]" [id]="j"/>

你能告诉我，我该怎么解决？ 这是我的插件，它可以工作，但是由于上面描述的这个错误， 我的插件在这里

Answer 1

使用*ngFor ，应避免直接访问要迭代的数组，例如[(ngModel)]="helper[i][j]" 。

通常，在使用数据绑定时，应尝试始终使用完整的对象和dot（。）表示法。

在您的情况下，只需将原始数组['','','','','']替换为对象数组[value: '', value: '', value: '', value: '', value: '']并将其直接绑定。

<td *ngFor="let item2 of helper[i]; let j = index;">
    <input maxlength="1" size='5' name="{{i}}{{j}}" [(ngModel)]="item2.value" [id]="j"/>
</td>

我已经更新了你的矮人