1

La verdad es que estoy usando accordion(ui semantic) para mostrar y desplegar preguntas y respuestas.
Imagina que quieres hacer una vista que muestre diferentes temáticas. Es decir un ngfor para diferentes enfermedades.
- primer ngfor enseña las enfermedades.

al pulsar en uno de ellos te sale y despliega gracias a accordion y ngfor todos las preguntas que se han hecho por los usuarios de esa enfermedad (uno puede ser 10 y otro 200 preguntas). Desplegable con accordion y ngfor en angular

en pregunta he insertado un boton que si lo pulso ne hace y muestra un desplegable o formulario pequeño de esa enfermedad para realizar una pregunta. Ese formulario esta en un componente hijo que se muestra.

Mi problema es que he usado propiedades de html y div para esconderlo, pero solo lo esconde, no evito que lo realice en todos los ngfor.

<div  id="nuevaPregunta{{Enfermedad.id}}" hidden>

    <app-form-pregunta  [AuxEnfermedad]="Enfermedad"  ></app-form-pregunta>
  </div>                             
</div>

Se ve que con eso solo hago NO lo muestre, no que no lo cree. Yo quisiera que el app-form-pregunta NO fuese creado más que en UNA de las enfermedades donde deseo hacer la pregunta. ¿Como lo hago?

Gracias.

NOTA: Un compañero me aconseja usar ngif (Gracias mil) , pero no lo consigo. Pongo en mi método em .ts

mostrarFormPregunta(idEn:string){

  this.entroFormPregunta= true

  if (document.getElementById(idEn).hidden == true) {
     document.getElementById(idEn).hidden=false;
  } else {
     document.getElementById(idEn).hidden=true;
  }


}

y en mi html uso....

<!--1 Hacer boton para realizar pregunta de enfermedad-->
<div *ngIf ="autenticado">                  
  <button (click)="mostrarFormPregunta('nuevaPregunta' + Enfermedad.id)" name="boton_Hacer_Pregunta" >
  Perguntar ahora {{Enfermedad.id}}</button>

  <div  id="nuevaPregunta{{Enfermedad.id}}"  hidden>
    <div *ngIf ="entroFormPregunta" >
    <app-form-pregunta  [AuxEnfermedad]="Enfermedad"  ></app-form-pregunta>
    </div>
  </div>                             
</div>
<!--1 Hacer boton para realizar pregunta de enfermedad-->

Tampoco si en vez de lo de arriba hago:

<!--1 Hacer boton para realizar pregunta de enfermedad-->
<div *ngIf ="autenticado">                  
  <button (click)="mostrarFormPregunta('nuevaPregunta' + Enfermedad.id)" name="boton_Hacer_Pregunta" >
  Preguntar ahora {{Enfermedad.id}}</button>

  <div  id="nuevaPregunta{{Enfermedad.id}}"  hidden>

    <div *ngIf ='Enfermedad.id===entroFormPregunta' >

    <app-form-pregunta  [AuxEnfermedad]="Enfermedad"  ></app-form-pregunta>
    </div>
  </div>                             
</div>
<!--1 Hacer boton para realizar pregunta de enfermedad-->

y en componente:

mostrarFormPregunta(idEn:string){

   this.entroFormPregunta=idEn;

  if (document.getElementById(idEn).hidden == true) {
     document.getElementById(idEn).hidden=false;
  } else {
     document.getElementById(idEn).hidden=true;
  }


}

y tampoco. ¿Qué hago mal? Gracias

1
  • ngIf es lo que buscas. Puedes poner un ejemplo mínimo que replique el problema?Te recomiendo usar stackblitz para ello. Y editar tu pregunta con el código que denota el problema. (No tiene que ser todo)
    – Legna
    Commented el 7 mar. 2020 a las 14:54

1 respuesta 1

1

Puedes usar una aproximación como esta:

<div  id="nuevaPregunta{{Enfermedad.id}}" hidden>

    <app-form-pregunta  
     *ngIf='idPreguntaSeleccionada === Enfermedad.id'
     [AuxEnfermedad]="Enfermedad"  ></app-form-pregunta>
  </div>                             
</div>


En tu component.ts crear la variable idPreguntaSeleccionada y solo la asignas al dar click en tu component.html con algo así:

<a href='javascript:void(0) 
   (click)='idPreguntaSeleccionada = Enfermedad.id' 
>Seleccionar</a>

Te dejo un ejemplo funcional tratando de replicar el problema y la solución para entendernos un poco mejor.

6
  • Gracias. Veo por donde vas. Es obvio (ahora que me lo has dicho, claro) intentar con ng if. Pero no va. En mi componente .ts pongo....
    – DANIEL
    Commented el 7 mar. 2020 a las 15:11
  • <div id="nuevaPregunta{{Enfermedad.id}}" hidden> {{entroFormPregunta}}----{{Enfermedad.id}} <div *ngIf ='Enfermedad.id==entroFormPregunta' > no me funciona, uno y otro son iguales 1---1 y no abre formulario.
    – DANIEL
    Commented el 7 mar. 2020 a las 15:40
  • el ejemplo funcional solo abre una pantalla con mensaje de HOLA.
    – DANIEL
    Commented el 7 mar. 2020 a las 15:46
  • Sorry, no guarde los cambios, deja lo vuelvo hacer y actualizo.
    – Legna
    Commented el 7 mar. 2020 a las 15:46
  • @DANIEL Ya quedo.
    – Legna
    Commented el 7 mar. 2020 a las 15:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.