0
1.2K
VistasAngular ngIf usando la condición marcada de la casilla de verificación principal
Estoy un poco atascado con mi problema. Estoy trabajando en una vista así:
Estoy obteniendo datos de la API, por lo que tendré múltiples opciones y subopciones. Sin embargo, quiero que la subopción aparezca solo cuando la casilla principal esté marcada. Traté de usar * ngIf:
<ul *ngFor="let job of jobs; let i = index"> <input type="checkbox" id="{{i}}" value="{{job.name}}"><label for="{{i}}">{{job.name}}</label> <ul *ngIf="CONDITION HERE"> <li *ngFor="let child of job.children"><label><input type="checkbox"> {{child.name}}</label></li> <li *ngFor="let child of job.children"><label><input type="checkbox"> {{child.name}}</label></li> </ul> </ul>Pero no puedo identificar qué condición podría usar. ¿Hay una solución simple para resolver eso?
@edit Déjame aclarar. Podría tener múltiples opciones como esa:
El uso de una bandera no funcionará, porque cada opción principal tendría que usar una variable booleana única.
3 Respuestas
Responde la pregunta0
Puede lograr esto con la ayuda de la variable de referencia de plantilla . Asigne una variable de plantilla a todos los elementos de casilla de verificación de entrada principal repetitivos.
Use esta variable para verificar el estado de la casilla de verificación (marcada/sin marcar) y, en función de esto, muestre/oculte a los niños.
Tenga en cuenta que tendrá que usar también
(change)="true"para la casilla de verificación principal. Sin esto, la propiedad marcada/no marcada de la casilla de verificación no cambiará.
Modifica tu plantilla así:
<ul *ngFor="let job of jobs; let i = index"> <input type="checkbox" id="{{ i }}" value="{{ job.name }}" (change)="true" #checkBox/><label for="{{ i }}" >{{ job.name }}</label > <ul *ngIf="checkBox.checked"> <li *ngFor="let child of job.children"> <label><input type="checkbox" /> {{ child.name }}</label> </li> <li *ngFor="let child of job.children"> <label><input type="checkbox" /> {{ child.name }}</label> </li> </ul> </ul>Stackblitz: https://stackblitz.com/edit/angular-x3coln?file=src/app/app.component.html
0
Agregue una propiedad marcada en su modelo, luego, en función de si está marcada o no, muestre la casilla de verificación secundaria.
Ex (asumiendo que su modelo se llama Trabajo)
export class Job { isChecked: boolean = false; } Entonces su ngIf sería *ngIf="job.isChecked"
0
<input [checked]="checkedMain" type="checkbox" id="{{i}}" value="{{job.name}}"><label for="{{i}}">{{job.name}}</label> <ul *ngIf="checkedMain"> <li *ngFor="let child of job.children"><label><input type="checkbox"> {{child.name}}</label></li> <li *ngFor="let child of job.children"><label><input type="checkbox"> {{child.name}}</label></li> </ul>