當兩個按鈕呈角度時，我正在嘗試創建一種切換動作。
編碼按鈕
所以，應該發生的是，當我點擊趨勢時，爆發應該顯示為非活動狀態，反之亦然。我試圖通過[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出現在控制臺中，所以我不明白發生了什么。
先感謝您
uj5u.com熱心網友回復：
你的邏輯onTabChange似乎是錯誤的。的值this.trendingButton將始終為true，因此 this.burstButton將始終false從 if-else 的第一個分支分配值。
最重要的是，您是否.active在 CSS 檔案中定義了類？如果不是，那么您看到的是預期的行為。
uj5u.com熱心網友回復：
你的情況應該是這樣的...
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 中定義了“活動”類
uj5u.com熱心網友回復：
你有錯誤的邏輯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>
整型 TS 檔案：
public current: string = 'burst';
onTabChange(buttonName: string) {
console.log('Hello from ontabchange')
this.currentButton = buttonName;
}
希望這可以幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/485631.html
標籤：javascript html css 有角度的
上一篇：如何使location.back()觸發CanDeactivate？（在Angular13中）
下一篇：Angular14-未捕獲（承諾）：NullInjectorError：R3InjectorError（Standalone[z]）[s->s->s]：