Estoy usando un valor llamado count que inicialmente se establece en cero. He creado dos botones para incrementar y disminuir el valor de conteo.
<button (click)="increment()">++</button> <h3 class="count">{{ count }}</h3> <button (click)="decrement()">--</button> Quiero crear otro div que muestre el valor de conteo por separado con diferentes colores según las condiciones del interruptor.
<div [ngSwitch]="count"> <h1 style="color: red" *ngSwitchCase="count % 2 == 0">{{ count }}</h1> <h1 style="color: green" *ngSwitchCase="count % 3 === 0">{{ count }}</h1> <h1 style="color: blue" *ngSwitchCase="count % 7 === 0">{{ count }}</h1> <h1 *ngSwitchDefault>{{ count }}</h1> </div>El valor de conteo se muestra pero el color permanece negro. ¿Alguien puede decirme qué estoy haciendo mal? Soy nuevo en angular.
el ngSwitchCase está funcionando como se esperaba. imagina este caso:
switch (this.count) { case (this.count % 2 === 0) as any: break; case (this.count % 3 === 0) as any: break; case (this.count % 3 === 0) as any: break; default: break; } siempre caería en el caso default porque está haciendo un cambio en el conteo, y los casos son true o false
¿Por qué no usas *ngIf ?
u otra solución a tu problema sea esta:
<div [ngSwitch]="count"> <h1 style="color: red" *ngSwitchCase="count % 2 === 0 ? count : false">{{ count }}</h1> <h1 style="color: green" *ngSwitchCase="count % 3 === 0 ? count : false">{{ count }}</h1> <h1 style="color: blue" *ngSwitchCase="count % 7 === 0 ? count : false">{{ count }}</h1> <h1 *ngSwitchDefault>{{ count }}</h1> </div>Un truco para eso, sería algo como esto:
<div [ngSwitch]="true"> <h1 style="color: red" *ngSwitchCase="count % 2 == 0">{{ count }}</h1> <h1 style="color: green" *ngSwitchCase="count % 3 === 0">{{ count }}</h1> <h1 style="color: blue" *ngSwitchCase="count % 7 === 0">{{ count }}</h1> <h1 *ngSwitchDefault>{{ count }}</h1> </div>Pero estoy seguro de que podemos pensar en mejores soluciones:
Por ejemplo, si se ingresa el conteo, puede calcular el color del encabezado así:
característica.componente.ts
@Input() count!: number; color = ''; ngOnChanges({count}: SimpleChanges) { if (count) { this.setColor(); } } private setColor() { if (this.count % 2 === 0) { this.color = 'red'; } ... ... }Entonces en la plantilla quedaría así:
<div> <h1 style="color: {{ color }}">{{ count }}</h1> </div>