I am currently working on printing checkboxes and facing an issue with initializing the id and name attributes using ngFor. The values I'm getting are incorrect.
Let's consider 2 arrays (or n arrays retrieved from a database):
animal = 'dog', 'cat'
vehicle = 'bus', 'plane', 'train'
If I use 2 ngFor loops, it should iterate as follows (i, j being the indices):
i = 0 , j=0 > i = 0, j = 1
The next row should be:
i = 1, j = 0 > i = 1, j = 1 > i=1, j = 2
Below is a snippet of my code :
<form>
<div class="form-group row" *ngFor="let firstColumn of mapMenusFirstColumn; index as i">
<label class="col-4">{{firstColumn}}</label>
<div class="col-8">
<div class="custom-control custom-checkbox custom-control-inline" *ngFor="let secondColumn of this.getSecondColumn(this.mapMenu,firstColumn); index as j">
<input name= {{i}} id={{i+'_'+j}} type="checkbox" class="custom-control-input" value={{secondColumn}}>
<label for={{i+'_'+j}} class="custom-control-label">{{secondColumn}}</label>
</div>
</div>
</div>
</form>
In this scenario, the name attribute should correspond to the following ids:
name should be 0 -> when id 0_0
name should be 0 -> when id 0_1
name should be 1 -> when id 1_0
name should be 1 -> when id 1_1
name should be 1 -> when id 1_2
[I have not included actual data due to its size (n rows), only provided a screenshot]
When I assign the id and name as both i:
https://i.sstatic.net/RNmF2.png
However, when I set i as the name (since for 3/4 checkbox items, the name should be same) and j as the id:
https://i.sstatic.net/OwDPn.png
It appears that i is in the position of j. I have attempted swapping i and j positions, but it did not resolve the issue.
I would appreciate insights on alternative implementations as well.