Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/380.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 选中复选框时,所有其他复选框都会被选中_Javascript_Angular_Typescript - Fatal编程技术网

Javascript 选中复选框时,所有其他复选框都会被选中

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

我有一个表格,在我的angular 11应用程序中显示一些数据,每行旁边都有一个复选框,出于某种原因,当我选中一个复选框时,所有复选框都被选中,我尝试向它添加一个id,但它不起作用,我如何解决这个问题

以下是我使用的代码:

<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你知道在检查一行时如何突出显示表格行吗?我有几个想法谢谢你的回答你介意在原始答案中分享一个吗?哦,当然,这看起来只是这一行的延续。。。我会再发一个帖子,谢谢。