Reputation: 75
I have a table where I display some data in my angular 11 app with a check box next to each row, for some reason when I check a checkbox all the checkboxes get checked too, I tried adding an id to it but it did not work, how can I fix this issue?
Here is the code I used :
<table
class="
table
is-hoverable is-narrow is-striped is-fullwidth
content-table
mt-6
"
>
<thead>
<tr>
<th></th>
<th>{{ "ReporHist.FileName" | translate }}</th>
<th>{{ "ReporHist.NumberRecords" | translate }}</th>
<th>
<span class="icon-text" (click)="sort('createdAt')">
<span class="button icon is-primary">
<i
class="fas fa-angle-down"
[ngClass]="{ arrowClicked: isArrowClicked }"
></i>
</span>
<span>{{ "ReporHist.UploadDate" | translate }}</span>
</span>
</th>
<th>Action</th>
</tr>
<tr></tr>
</thead>
<tbody>
<tr
*ngFor="
let row of FilteredDataSource
| paginate: { itemsPerPage: itemsPerPage, currentPage: p };
let i = index
"
>
<td>
<fa-icon [icon]="faFileCsv" size="4x"></fa-icon>
</td>
<td style="vertical-align: middle">
{{ row.fileName }}
</td>
<td style="vertical-align: middle">{{ row.NumberRecords }}</td>
<td style="vertical-align: middle">
{{ row.createdAt.split("T")[0] }}
{{ row.createdAt.split("T")[1].split(".")[0] }}
</td>
<td style="vertical-align: middle">
<input
#inputElement
(change)="check($event, inputElement, row)"
[name]="i"
[id]="i"
type="checkbox"
[checked]="isChecked"
class="has-text-centered"
/>
</td>
</tr>
</tbody>
</table>
Upvotes: 1
Views: 1991
Reputation: 40677
It's probably because they are all bound to [checked]="isChecked"
. You can create a map and put the values with respect to the ngFor index.
Example:
isCheckedMap = {};
check($event, inputElement, row, i) {
...
this.isCheckedMap[i] = !this.isCheckedMap[i]; // toggle the value based on index
}
<input
#inputElement
(change)="check($event, inputElement, row, i)"
[name]="i"
[id]="i"
type="checkbox"
[checked]="isCheckedMap[i]"
class="has-text-centered"
/>
Upvotes: 1