class.active 未通过（单击）事件处理程序更改

Question

我试图在 angular 中的两个按钮时创建一种切换动作。

Buttons to code

所以，应该发生的是当我点击趋势时，突发应该显示为不活动，反之亦然。我正在尝试通过 angular:

上的 [class.active] 来完成此操作

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

我试图通过声明两个布尔变量来做到这一点，每个按钮一个：

public trendingButton: boolean = true;
public burstButton: boolean = false;

并且通过一个函数处理点击事件很明显：

onTabChange() {

    console.log('Hello from ontabchange')
    if (this.trendingButton) {
      this.burstButton = false;
    } else {
      this.burstButton = true;
    }

}

我的问题是，无论我点击哪个按钮，都没有任何反应。当我单击任一按钮时，onTabChange 上的日志打印出现在控制台中，所以我不明白发生了什么。

提前致谢

Answer 1

您 onTabChange 中的逻辑似乎有误。 this.trendingButton 的值将始终为 true，因此 this.burstButton 将始终从 if-else.[=16 的第一个分支分配 false 值=]

最重要的是，您是否在 CSS 文件中定义了 .active class？如果不是，那么您看到的就是预期的行为。

Answer 2

你在 onTabChange 中有错误的逻辑和一个额外的变量。使 html 代码执行带有按钮名称的 onTabChange:

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

int TS 文件：

public current: string = 'burst';
onTabChange(buttonName: string) {

    console.log('Hello from ontabchange')
    this.currentButton = buttonName;

}

希望对您有所帮助。

Answer 3

你的情况应该是这样的...

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`
    
    }

并且请确保您已在 CSS

中定义了您的“活跃”class

class.active 未通过（单击）事件处理程序更改

class.active is not changing through (click) event handler

html

javascript

css

angular