3

Tenho uma lista de usuários e cada usuário pode ser inativado ou ativado. Eu gostaria que o usuário quando estivesse com o valor 'false' (desativado) mudasse a cor para cinza.

HTML:

<tbody>
       <tr *ngFor="let user of users" >
         <td>{{user.user}}</td>
         <td>{{user.email}}</td>
         <td>
            <button class="btn btn-danger" data-toggle="modal" (click)="getUser(user)" data-target="#exampleModal">Recuperar Senha</button>
         </td>
          <td >
            <button [hidden]="user.active == false" class="btn btn-danger" (click)="desativarUsuario(user)" >Desativar</button>
            <button [hidden]="user.active == true" class="btn btn-danger" (click)="desativarUsuario(user)" >Ativar</button>
          </td>
      </tr>
</tbody>

1 Resposta 1

2

Não é muito elegante, mas você pode colocar um ngClass em cada coluna (td) com uma condição ternária.

<tbody>
       <tr *ngFor="let user of users" >
         <td [ngClass]="user.active == false ? 'bg-gray' : 'bg-green'">{{user.user}}</td>
         <td [ngClass]="user.active == false ? 'bg-gray' : 'bg-green'">{{user.email}}</td>
         <td [ngClass]="user.active == false ? 'bg-gray' : 'bg-green'">
            <button class="btn btn-danger" data-toggle="modal" (click)="getUser(user)" data-target="#exampleModal">Recuperar Senha</button>
         </td>
          <td [ngClass]="user.active == false ? 'bg-gray' : 'bg-green'">
            <button [hidden]="user.active == false" class="btn btn-danger" (click)="desativarUsuario(user)" >Desativar</button>
            <button [hidden]="user.active == true" class="btn btn-danger" (click)="desativarUsuario(user)" >Ativar</button>
          </td>
      </tr>
</tbody>

E, depois, é só utilizar o css para definir a cor de fundo.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .