Angular ngFor 如何仅修改复选框选中行的CSS样式

你当前将选中状态存储在组件级的单个全局布尔变量selRow上，*ngFor循环渲染的所有行都共同绑定这一个变量，只要变量值变更，所有行的[ngClass]判断都会同时生效，因此会出现勾选一个复选框、所有行样式同步变化的问题。

以下提供两种常见场景的实现，你可以根据业务需求选择：

方案1：支持多选（可同时选中多行） #

推荐用Set存储选中行的唯一业务ID，不会污染原始用户数据：

1. 修改TS代码

// 存储所有选中行的用户ID
selectedUserIds = new Set<string | number>();

// 切换单行选中状态
toggleRowSelect(userId: string | number): void {
  if (this.selectedUserIds.has(userId)) {
    this.selectedUserIds.delete(userId);
  } else {
    this.selectedUserIds.add(userId);
  }
}

2. 修改HTML模板
   将类名判断、复选框状态都和当前行的用户ID绑定，不再操作全局布尔值：

<tr *ngFor="let user of users" [ngClass]="selectedUserIds.has(user.id) ? 'selRow' : ''">
  <td class="checkbox-field">
    <input 
      type="checkbox" 
      [checked]="selectedUserIds.has(user.id)"
      (change)="toggleRowSelect(user.id)" 
    />
  </td>
  <td class="user-field"> 
    <img [src]="user.userPicture" alt="">
    {{ user.firstName }} {{ user.lastName }}
  </td>
  <td class="company-field">{{ getCompany(user.companyId) }}</td>
  <td class="email-field">{{ user.email }}</td>
  <td class="roles-field">{{ user.permissionRoles }}</td>
  <td class="edit-field">Edit</td>
  <td class="delete-field"><i class="fas fa-trash-alt"></i></td>
</tr>

3. CSS样式无需调整，保持原有代码即可：

.selRow {
   background-color: var(--el-lightblue);
}

.selRow .delete-field {
   color: var(--el-red);
}

小提示：如果用户数据暂时没有唯一ID，也可以在*ngFor中取遍历索引let i = index，用索引做选中判断，但数据排序、过滤时索引会动态变化，容易出现状态错位问题，不推荐生产环境使用。

方案2：仅支持单选（同一时间只能选中一行） #

如果业务要求互斥单选，TS中直接存储当前选中的用户ID即可：

// 存储当前选中行的用户ID，null表示无选中项
selectedUserId: string | number | null = null;

toggleRowSelect(userId: string | number): void {
  // 点击已选中行则取消选中，否则切换为当前点击行
  this.selectedUserId = this.selectedUserId === userId ? null : userId;
}

模板中对应修改判断逻辑即可：

• [ngClass]判断改为selectedUserId === user.id ? 'selRow' : ''
• 复选框[checked]绑定改为selectedUserId === user.id

• 选中前状态：
  
• 选中后状态：
  

内容的提问来源于stack exchange，提问作者manjiro sano