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).
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
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)