Búsqueda de sitios web

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