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

Check List em Angular

por EDUARDO BONTORIN ALVES
| 82.2k xp | 9 posts

Bom dia Pessoal, estou colocando em pratica o curso de angular, e tentando fazer um check list. o meu front so para exemplificar é da seguinte forma: Insira aqui a descrição dessa imagem para ajudar na acessibilidadeNesse teste básico, eu quero que quando clicar em teste ele crie um objeto para cada linha capturando qual dos radios foi selecionado.

Para isso eu fiz um componente como se fosse a linha de um check:

<tr>
          <td>{{checkList.descricao}}</td>
          <td>
            <div >
              <input  type="radio" name="{{checkList.id}}" id="{{checkList.id}}a" value="conforme" [(ngModel)]="checkList.status">
              <label  for="{{checkList.id}}1"></label>
            </div>
          </td>
          <td>
            <div>
              <input  type="radio" name="inlineRadioOptions" id="{{checkList.id}}b" value="nao_conforme" [(ngModel)]="checkList.status">
              <label  for="{{checkList.id}}2"></label>
            </div>
          </td>
          <td>
            <div >
              <input  type="radio" name="inlineRadioOptions" id="{{checkList.id}}c" value="nao_aplica" [(ngModel)]="checkList.status">
              <label  for="{{checkList.id}}3"></label>
            </div>
          </td>
      </tr>

e um outro componente para renderizar as linhas conforme a quantidade de objetos na minha lista

<section>
  <table>
    <thead>
      <th>Descrição</th>
      <th>Conforme</th>
      <th>Não Conforme</th>
      <th>Não Aplica</th>
    </thead>
    <tbody *ngFor="let check of listaCheckList">
      <app-check-list [checkList]="check">"check</app-check-list>
    </tbody>
  </table>
  <button (click)="teste()">teste</button>
</section>

Como fasso nesse segundo elemento, para verificar qual radio foi clicado em cada linha e criar e adicionar a minha lista de objetos e enviar ao backEnd ?

2 respostas
solução!
por Estudante
| 565.5k xp | 1338 posts

E aí! Para capturar qual rádio foi clicado em cada linha, você pode adicionar um evento (por exemplo, (click)) ao seu componente app-check-list para chamar uma função no componente pai. Aqui está uma versão simplificada do que você pode fazer:

No componente app-check-list, adicione um evento de clique ao rótulo do radio (por exemplo, (click)="radioClicado(checkList)"):

<!-- Seu código existente ... -->
<td>
  <div>
    <input type="radio" name="{{checkList.id}}" id="{{checkList.id}}a" value="conforme" [(ngModel)]="checkList.status">
    <label for="{{checkList.id}}a" (click)="radioClicado(checkList)"></label>
  </div>
</td>
<!-- Seu código existente ... -->

No seu componente pai (onde você tem o loop *ngFor), adicione um método radioClicado que adiciona ou atualiza o objeto na lista:

// Seu código existente ...

export class SeuComponentePai {
  listaCheckList: any[] = [];  // Certifique-se de que sua listaCheckList está declarada corretamente

  // Seu código existente ...

  radioClicado(checkList: any) {
    // Verifica se o objeto já está na lista
    const index = this.listaCheckList.findIndex(item => item.id === checkList.id);

    if (index !== -1) {
      // Se já existe, atualiza o status
      this.listaCheckList[index].status = checkList.status;
    } else {
      // Se não existe, adiciona à lista
      this.listaCheckList.push({ id: checkList.id, status: checkList.status });
    }
  }

  // Seu código existente ...

  // Método de teste para enviar ao back-end
  teste() {
    // Envie this.listaCheckList para o seu back-end aqui
    console.log("Enviando para o back-end:", this.listaCheckList);
  }
}

Precisa ajustar os tipos e propriedades de acordo com sua implementação real. Isso deve dar um ponto de partida para capturar os cliques nos rádios e gerenciar a lista de objetos que você deseja enviar ao back-end.

por EDUARDO BONTORIN ALVES
| 82.2k xp | 9 posts

Bom dia !

Obrigadão pela resposta, funcionou da forma que me falou