Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

O item não foi riscado ao realizar o style-biding

Referente ao curso Angular: ciclo de vida, no capítulo Trabalhando com dados reais e atividade Desafio: dando vida a caixa de seleção

por Lucas Labre De Melo
| 3k xp | 4 posts

Bom dia. Fiz o desafio e implementei o style-biding conforme o professor sugeriu, mas não surtiu o efeito esperado. 

<input
  class="checkbox"
  type="checkbox"
  name="comprado"
  id="comprado"
  [checked]="item.comprado"
  (change)="checarItem()">
<p class="description" [class.line-through]>{{item.nome}}</p>
<div class="d-contents" *ngIf="!item.comprado">
  <fa-icon class="delete-icon" [icon]="faTrash" ></fa-icon>
  <fa-icon (click)="editarItem()" class="edit-icon" [icon]="faPen" ></fa-icon>
</div>
<small class="date">{{item.data}}</small>

Ao marcar o checkbox, o nome do item não está sendo riscado, conforme mostrado abaixo

dois itens incluídos, um com checkbox marcado e outro sem estar marcado. No marcado deveria estar com o nome riscado

2 respostas
solução!
por DIEGO CARLOS MARTINS GAYOSO
| 118.8k xp | 184 posts
Instrutor

Olá Lucas, tudo bom?

A classe não está sendo aplicada por que ela não tem um motivo para ser aplicada. Você ser o style-binding, mas não colocou a condição na qual a classe será aplicada, no caso será quando item.comprado for verdadeiro. Para resolver basta fazer isso:

<input ...>
<p class="description" [class.line-through]="item.comprado" >{{item.nome}}</p>
<div ...>

Isso vai resolver. Testa ai e me conta se deu certo.

Bons estudos, abraço.

por Lucas Labre De Melo
| 3k xp | 4 posts

Funcionou perfeitamente! Muito obrigado. Esse style-biding é bastante útil, gostei :)