一个复选框选择也会触发其他复选框

Question

我有一些使用 ngFor 指令在表中显示的数据。我在最后一列中有复选框，我希望它只选择将被选中的行，而不是其他行。这是我的代码

HTML 代码

<div *ngIf="!admin">
          <div class="row clearfix">
            <div class="col-sm-12">
              <input type="checkbox" name="permission12" value="" (change)="isSelected = !isSelected" class="filled-in" id="permission12" (click)="chosen(listSupportAdminSchools.items)" />
              <label for="permission12">: Select All</label>
              <table class="table-bordered table-striped" style="width:100%">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Registration Number</th>
                    <th>Enrollment Type</th>
                    <th>Entity Type</th>
                    <th>Location</th>
                    <th>IsActive</th>
                    <th>Select</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let x of listSupportAdminSchools.items;">
                    <td>{{x.name}}</td>
                    <td>{{x.registrationNumber}}</td>
                    <td>{{x.educationType}}</td>
                    <td>{{x.administrativeType}}</td>
                    <td>{{x.county}}
                      <span>,</span>{{x.city}}
                      <span>,</span>{{x.district}}</td>
                    <td></td>
                    <td style="text-align: center">
               <!--       <button (click)="onClick()" class="btn btn-primary waves-effect">Select</button>   -->
                      <input type="checkbox" name="permission13" value="" [(ngModel)] = "isSelected" class="validate form-control" id="permission13" (click)="chosen()" />
                      <label for="permission13">: Select</label>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

在我的 .ts 文件中，我将 isSelected 布尔变量设置为 false。

每当我点击行中的一个复选框时，它也会选择另一个。但是全选复选框工作得很好

Answer 1

这个问题不是由 Angular 引起的，而是由 HTML 如何处理 label 的 for 属性引起的。浏览器查找具有匹配 id 属性的 first 元素并将所有点击发送到那里。

要解决这个问题，您需要为每个复选框指定一个唯一的 ID：

<div *ngIf="!admin">
  <div class="row clearfix">
    <div class="col-sm-12">
      <input type="checkbox" name="permission12" value="" (change)="isSelected = !isSelected" class="filled-in" id="permission12" (click)="chosen(listSupportAdminSchools.items)" />
      <label for="permission12">: Select All</label>
      <table class="table-bordered table-striped" style="width:100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Registration Number</th>
            <th>Enrollment Type</th>
            <th>Entity Type</th>
            <th>Location</th>
            <th>IsActive</th>
            <th>Select</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let x of listSupportAdminSchools.items; let i = index">
            <td>{{x.name}}</td>
            <td>{{x.registrationNumber}}</td>
            <td>{{x.educationType}}</td>
            <td>{{x.administrativeType}}</td>
            <td>{{x.county}}
              <span>,</span>{{x.city}}
              <span>,</span>{{x.district}}</td>
            <td></td>
            <td style="text-align: center">
       <!--       <button (click)="onClick()" class="btn btn-primary waves-effect">Select</button>   -->
              <input type="checkbox" [name]="'permission13' + 1" value="" [(ngModel)] = "x.isSelected" class="validate form-control" [id]="'permission13' + i" />
              <label [for]="'permission13' + i">: Select</label>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

---

变化：

首先，我们使用修改*ngFor为我们跟踪索引

*ngFor="let x of listSupportAdminSchools.items; let i = index"

然后，我们做一些简单的字符串连接来确保每个复选框id 是唯一的

[id]="'permission13' + i"

最后我们用同样的方法修改标签for

[for]="'permission13' + i"

注意事项：

• 通过在属性周围添加 [] 括号，我们将 Angular 处理为 Javascript。这让我们可以使用 + 运算符。
• 由于现在是 Javascript，我们需要在 permission13 周围添加 ''，以便将其视为字符串，而不是变量名
• 这是完成此任务的最简单方法，您还可以从*ngFor 对象的其他独特属性生成这些值，例如[id]="'permission13' + x.objectId"

---

(OBSELETE) 更新选定的单行：

更新复选框绑定：

[ngModel] = "selectedRow === x" (ngModelChange)="selectedRow = x"

您将需要模型selectedRow 中的属性。单击复选框时，它会设置此值。现在每个复选框都绑定到一个表达式，因此一次只能选中一个复选框。