This is my code:

TS:

  selRow: boolean = false;

HTML:

<tr *ngFor="let user of users" [ngClass]="selRow ? 'selRow' : ''">
  <td ><input type="checkbox" (change)="selRow = !selRow" /></td>
  <td > <img [src]="user.userPicture" alt="">
      {{ user.firstName }} {{ user.lastName }}</td>
  <td >{{ getCompany(user.companyId) }}</td>
  <td >{{ user.email }}</td>
  <td >{{ user.permissionRoles }}</td>
  <td >Edit</td>
  <td ><i ></i></td>
</tr>

CSS:

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

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

I'd like the above code to change only the checked row by the checkbox, yet it changes the CSS of all rows. Does anyone know how I can fix this? Here is the example:

Before selected:

After selected:

CodePudding user response：

Your condition of [ngClass] is wrong, as it is true for all of the rows.

if you need to highlight one row at a time, you can save the row index, instead of using selRow property.

Like This:

in TS

class Component {
   selectedUserIndex: number = null;

   onToggleUser(userInded: number) {
       // unselect the selected row, when the click was on the selected row
       if(userInded === this.selectedUserIndex) {
          this.selectedUserIndex = null;
          return;
       }

       this.selectedUserIndex = userInded;
   }
}

in Template

<tr *ngFor="let user of users; let userInded = index" [ngClass]="userInded ==  selectedUserIndex ? 'selRow' : ''">
  <td ><input type="checkbox" (change)="onToggleUser(userInded)" /></td>
  <td > <img [src]="user.userPicture" alt="">
      {{ user.firstName }} {{ user.lastName }}</td>
  <td >{{ getCompany(user.companyId) }}</td>
  <td >{{ user.email }}</td>
  <td >{{ user.permissionRoles }}</td>
  <td >Edit</td>
  <td ><i ></i></td>
</tr>

In the case of multiselection rows: in TS

class Component {
   selectedUsers: { [key: number]?: boolean } = {};

   onToggleUser(userInded: number) {
       // unselect the selected row, when the click was on the selected row
       if(this.selectedUsers[userInded]) {
         this.selectedUsers[userInded] = false;
          return;
       }

       this.selectedUsers[userInded] = true;
   }
}

in Template

<tr *ngFor="let user of users; let userInded = index" [ngClass]="selectedUsers[userInded] ? 'selRow' : ''">
  <td ><input type="checkbox" (change)="onToggleUser(userInded)" /></td>
  <td > <img [src]="user.userPicture" alt="">
      {{ user.firstName }} {{ user.lastName }}</td>
  <td >{{ getCompany(user.companyId) }}</td>
  <td >{{ user.email }}</td>
  <td >{{ user.permissionRoles }}</td>
  <td >Edit</td>
  <td ><i ></i></td>
</tr>

CodePudding user response：

From your code, you are sharing selRow for each row, hence when you tick the checkbox in a row, other rows' checkboxes will also automatically checked.

Instead, what you need are:

1. selRows: An array to store selected index.
2. toggleSelectedRows: An method to add/remove the index from selRows.
3. isSelectedRow: Check whether the index is added in selRows.

selRows: number[] = [];

toggleSelectedRows(i: number) {
  let index = this.selRows.findIndex((x) => x == i);

  if (index == -1) this.selRows.push(i);
  else this.selRows.splice(index, 1);
}

isSelectedRow(i: number) {
  return this.selRows.findIndex((x) => x == i) > -1;
}

<tr
  *ngFor="let user of users; let i = index"
  [ngClass]="isSelectedRow(i) ? 'selRow' : ''"
>
  <td >
    <input type="checkbox" (change)="toggleSelectedRows(i)" />
  </td>
  
  ...
</tr>

Sample StackBlitz Demo

CodePudding user response：

From the code that you've shown, I'm guessing that "selRow" is a boolean variable in your component.

Since there's always a single instance of that variable, it affects all rows.

You need either a separate variable for each row (perhaps a property in the 'user" if more than one can be selected, or if only one can be selected at a time, a variable that holds the currently selected user.