Javascript 选中复选框时,所有其他复选框都会被选中
我有一个表格,在我的angular 11应用程序中显示一些数据,每行旁边都有一个复选框,出于某种原因,当我选中一个复选框时,所有复选框都被选中,我尝试向它添加一个id,但它不起作用,我如何解决这个问题 以下是我使用的代码:Javascript 选中复选框时,所有其他复选框都会被选中,javascript,angular,typescript,Javascript,Angular,Typescript,我有一个表格,在我的angular 11应用程序中显示一些数据,每行旁边都有一个复选框,出于某种原因,当我选中一个复选框时,所有复选框都被选中,我尝试向它添加一个id,但它不起作用,我如何解决这个问题 以下是我使用的代码: <table class=" table is-hoverable is-narrow is-striped is-fullwidth content-table mt-6 " > <thead
<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>
{{“ReporHist.FileName”| translate}
{{“reprohist.NumberRecords”{翻译}
{{“reprohist.UploadDate”{翻译}
行动
{{row.fileName}
{{row.NumberRecords}}
{{row.createdAt.split(“T”)[0]}
{row.createdAt.split(“T”)[1]。split(“.”[0]}
这可能是因为它们都绑定到了[checked]=“isChecked”
。您可以创建一个映射并将值放在ngFor索引中
例如:
isCheckedMap={};
检查($event,inputElement,row,i){
...
this.isCheckedMap[i]=!this.isCheckedMap[i];//基于索引切换值
}
Hey@eko你说得对,我真不敢相信我错过了,非常感谢你的帮助。Hey,@eko你知道在检查一行时如何突出显示表格行吗?我有几个想法谢谢你的回答你介意在原始答案中分享一个吗?哦,当然,这看起来只是这一行的延续。。。我会再发一个帖子,谢谢。