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

Question

I try to make a table of input fields with help of nested ngFor with two-way data binding. I almost achieved this, but something with two-way data binding is wrong and I can't find a problem.

So, this is what I want to have - I want to be able type each letter of word in.

I have this table, and I am able to type in, but if I type in first cell, the same value appears in second, if I type in third, value appears also in 4th and 5th... And I can't understand why, I guess the problem is with this line

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

Could you please tell me, how could I fix this one? Here is my plunker, it works, but with this mistake, that I described above... My plunker is here

Answer 1

When using *ngFor , you should try to avoid accessing directly the arrays you are iterating on, like with [(ngModel)]="helper[i][j]" .

Generally, you should try to always works with full object and dot(.) notation when using data binding.

In your case, just replace the raw array ['','','','',''] by an array of objects [value: '', value: '', value: '', value: '', value: ''] and bind it directly.

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

I have updated your plunker