angular - Vinculación con ngIf
Estoy tratando de enlazar valores de acuerdo con la condición mencionada en *ngIf. Cuando intento usar el operador && dentro de *ngIf, funciona misteriosamente.
Código
<div *ngIf="days.sunday == true">
<p class="circle ml-3">Sun</p>
</div>
<div *ngIf="days.monday == true">
<p class="circle ml-2">Mon</p>
</div>
<div *ngIf="days.tuesday == true">
<p class="circle ml-2">Tue</p>
</div>
<div *ngIf="days.wednesday == true">
<p class="circle ml-2">Wed</p>
</div>
<div *ngIf="days.thursday == true">
<p class="circle ml-2">Thu</p>
</div>
<div *ngIf="days.friday == true">
<p class="circle ml-2">Fri</p>
</div>
<div *ngIf="days.saturday == true">
<p class="circle ml-2">Sat</p>
</div>
La condición anterior está funcionando bien. Puedo imprimir los valores en consecuencia.
<div *ngIf="days.sunday == true && days.monday == true && days.tuesday == true && days.wednesday == true &&
days.thursday == true && days.friday == true && days.saturday == true">
<p class="circle ml-2">Everyday</p>
</div>
A partir de la condición anterior, estoy intentando imprimir Everyday si todas las condiciones son verdaderas, pero se está imprimiendo sun mon tue wed thu fri sat Everyday
Respuesta #1
Usa una plantilla If/Else
- Comprueba si todos los días son verdaderos. Luego imprime solo Cada día
- Else imprime otros días según sus condiciones
<!-- If block for "Everyday" -->
<div *ngIf="days.sunday && days.monday && days.tuesday && days.wednesday &&
days.thursday && days.friday && days.saturday; else elseBlock">
<p class=" circle ml-2 ">Everyday</p>
</div>
<!-- Else block for other days "Sun, Mon, etc..." -->
<ng-template #elseBlock>
<div *ngIf="days.sunday">
<p class="circle ml-3">Sun</p>
</div>
<div *ngIf="days.monday">
<p class="circle ml-2">Mon</p>
</div>
<div *ngIf="days.tuesday">
<p class="circle ml-2">Tue</p>
</div>
<div *ngIf="days.wednesday">
<p class="circle ml-2">Wed</p>
</div>
<div *ngIf="days.thursday">
<p class="circle ml-2">Thu</p>
</div>
<div *ngIf="days.friday">
<p class="circle ml-2">Fri</p>
</div>
<div *ngIf="days.saturday">
<p class="circle ml-2">Sat</p>
</div>
</ng-template>
Nota
days.sunday === true es equivalente a days.sunday ya que es un booleano
Respuesta #2
Para la condición dada, tienes que hacer lo mismo todos los días que hacías todos los días.
<div *ngIf="days.sunday == true && days.monday == false && days.tuesday == false &&
days.wednesday == false && days.thursday == false && days.friday == false &&
days.saturday == false">
<p class="circle ml-3">Sun</p>
</div>
...
