0

Eu estou iniciando em Angular no meu colégio e preciso fazer um projeto de um site médico. Em uma das partes tenho o seguinte template:

<div class="container mt-5 mb-5">
    <h3>Qual a doença?</h3>
    <div class="container" *ngFor="let doenca of doencas;let i= index">
        <div class='col-2'> 
              <div class="form-check">
                  <input type="checkbox" class="form-check-input" [(ngModel)]="paciente.doenca" name="{{doenca}}" >
                  <label class="form-check-label" for="exampleCheck1">{{doenca}}</label>
                </div>
        </div>
       <p *ngIf="paciente.doenca==true && doenca=='febre'">
          <input type="radio" name="alta">Febre alta
          <input type="radio" name="media">Febre media
          <input type="radio" name="baixa">Febre alta
       </p>
    </div>
  </div>

e o seguinte código:

paciente:Paciente; 
 doencas=["febre","desmaio","vomito"];
(dentro do model paciente existem diversos atributos,entre eles estão os três que estão citados no array doencas)

Quero que ao clicar no checkbox mudasse o valor do atributo da doença correspondente em paciente e após isso aparecesse a tag "p" com o resto das perguntas relacionada a doença. Mas do jeito que tá,quando eu clico toda as checkbox são marcadas. Como resolver?

2
  • Não ficou clara sua pergunta, poderia postar como é a classe Paciente?
    – LeAndrade
    Commented 5/11/2019 às 23:22
  • Aqui está o link do GitHub pra facilitar(o código que tá dando problema está em edit-pediatra) :github.com/JuanGustah/PPO Commented 6/11/2019 às 0:20

1 Resposta 1

1

Juan, ao clicar no checkbox altere o valor de uma variável e faça com que seu <p> utilize esta variável para ser ou não exibido:

<input type="checkbox" (change)="minhaVariavel = $event.target.checked" />
<p *ngIf="minhaVariavel">...</p>

Outro ponto é que os radios devem ter em seu name uma identificação que torna aquele grupo único. Ao utilizar um name diferente nos 3 radios possibilitará que o usuário selecione mais de um. Para ajustar:

<input type="radio" name="algumaIdentificacao1" value="alta">Febre alta
<input type="radio" name="algumaIdentificacao1" value="media">Febre media
<input type="radio" name="algumaIdentificacao1" value="baixa">Febre alta

Abaixo há um exemplo funcional baseado no seu cenário mas provavelmente diferente, já que não há todas as informações na pergunta.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  doencas = [
    { nome: 'Doença 1', checked: false, nivel: null },
    { nome: 'Doença 2', checked: false, nivel: null },
    { nome: 'Doença 3', checked: true, nivel: 'alta' }
  ];
}

Template:

<div *ngFor="let doenca of doencas">
  <input type="checkbox" 
    class="form-check-input" 
    name="{{doenca}}"
    (change)="doenca.checked = !doenca.checked"
    [checked]="doenca.checked" >
  <label class="form-check-label" for="exampleCheck1">{{doenca.nome}}</label>
  <br />
  <input
    type="radio" 
    [disabled]="!doenca.checked"
    [name]="doenca.nome"
    [checked]="doenca.nivel == 'alta'"
    (change)="doenca.nivel = 'alta'"
    value="alta">Febre alta

  <input
    type="radio"
    [disabled]="!doenca.checked"
    [name]="doenca.nome"
    [checked]="doenca.nivel == 'alta'"
    (change)="doenca.nivel = 'media'"
    value="media">Febre media

  <input 
    type="radio" 
    [disabled]="!doenca.checked"
    [name]="doenca.nome"
    [checked]="doenca.nivel == 'alta'"
    (change)="doenca.nivel = 'baixa'"
    value="baixa">Febre baixa
  <br />
  <br />
</div>

Exemplo: https://stackblitz.com/edit/angular-f1h8n5

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 .