Nested ngFor with two-way data binding Angular2

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

Noémi Salaün · Accepted Answer · 2017-06-26 21:20:53Z

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

answered Jun 26, 2017 at 21:20

Noémi Salaün

5,0363 gold badges35 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nested ngFor with two-way data binding Angular2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related