Estoy tratando de crear una especie de acción de alternar cuando dos botones están en angular.
Entonces, lo que debería suceder es que cuando hago clic en tendencia, la ráfaga debería aparecer como inactiva y viceversa. Estoy tratando de hacer esto a través [class.active] en angular:
<div class="col-6"> <button [class.active]="burstButton" (click)="onTabChange()" clickable>Burst</button> </div> <div class="col-6"> <button [class.active]="trendingButton" (click)="onTabChange()" clickable>Trending</button> </div>Traté de hacer esto declarando dos variables booleanas, una para cada botón:
public trendingButton: boolean = true; public burstButton: boolean = false;Y maneje el evento de clic a través de una función obviamente:
onTabChange() { console.log('Hello from ontabchange') if (this.trendingButton) { this.burstButton = false; } else { this.burstButton = true; } } Mi problema es que no importa en qué botón haga clic, no pasa nada. La impresión de registro en onTabChange aparece en la consola cuando hago clic en cualquiera de los botones, por lo que no entiendo qué está pasando.
Gracias de antemano
La lógica en su onTabChange parece incorrecta. El valor de this.trendingButton siempre será true y, por lo tanto, a this.burstButton siempre se le asignará el valor false de la primera rama de su if-else.
Lo más importante, ¿ha definido la clase .active en su archivo CSS? Si no, entonces lo que ve es el comportamiento esperado.
Tu condición debería ser así...
trendingButton: boolean = false; burstButton: boolean = false; onTabChange() { console.log('Hello from ontabchange') if (!this.trendingButton) { this.trendingButton= true; } else { this.trendingButton= false; } if (!this.burstButton) { this.burstButton= true; } else { this.burstButton= false; }`enter code here` }y asegúrese de haber definido su clase "activa" en CSS
Tiene una lógica incorrecta en onTabChange y una variable adicional. Haga que el código html se ejecute en TabChange con el nombre del botón:
<div class="col-6"> <button [class.active]="currentButton === 'burst'" (click)="onTabChange('burst')" clickable>Burst</button> </div> <div class="col-6"> <button [class.active]="currentButton === 'trending'" (click)="onTabChange('trending')" clickable>Trending</button> </div>archivo TS int:
public current: string = 'burst'; onTabChange(buttonName: string) { console.log('Hello from ontabchange') this.currentButton = buttonName; }Espero que esto ayude.