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

此问题不是由角度引起的，而是由HTML如何处理label的{{1}}属性引起的。浏览器会查找具有匹配的for属性的 first 元素，然后将所有点击发送给该元素。

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

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">  <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

注意：

通过在属性周围添加[]括号，我们将其像Javascript一样进行了角度处理。这样我们就可以使用+运算符。
由于它现在是Javascript，因此我们需要在Permission13周围添加''，以便将其视为字符串而不是变量名
这是完成此操作的最简单方法，您还可以从[for]="'permission13' + i"对象的其他唯一属性（例如*ngFor

（已删除）已更新单行的选择：

更新复选框绑定：

[id]="'permission13' + x.objectId"

您将需要模型[ngModel] = "selectedRow === x" (ngModelChange)="selectedRow = x"中的一个属性。单击复选框后，将设置此值。现在，每个复选框都绑定到一个表达式，因此一次只应选中一个复选框。

一个复选框的选择也会触发另一个复选框

1 个答案: