本文介紹了如何在角度2中動態(tài)更改css類名的處理方法,對大家解決問題具有一定的參考價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧!
問題描述
我有兩個CSS類名如下
我的 HTML 有一個心形圖標(biāo)
這里我有兩個 div 標(biāo)簽,心形圖標(biāo)最初是灰色,點擊后我會將其更改為藍色.
這是我的 ts 文件代碼:
我有兩個不同顏色的圖標(biāo).
問題
是否可以更改圖標(biāo)的類別而不是兩個心形圖標(biāo)?
我在 JavaScript 中看到我們可以更改它w3schools 簡單的方法將類應(yīng)用于 div 標(biāo)簽,但我是 TypeScript 的新手.如何更改班級?
解決方案
或
I have two CSS class name as follows
My HTML has a heart icon
Here I have two div tags, the heart icon is of gray color initially and on clicking that I will change it to blue color.
Here is my ts file code: showheartIcon=true;
showheartIconRed =false;
setWishlistTrue(id){
this.showheartIconRed = true;
this.showheartIcon = false;
}
setWishlistFalse(id){
this.showheartIconRed = false;
this.showheartIcon = true;
}
I have two icons of different color.
Question
Instead of having two heart icons is it possible to change the class of the icon?
I have seen in JavaScript we can change it w3schools simple way to apply class to the div tag, but I am new to TypeScript. How can I change the class? 解決方案 <div
[class.icon_heart]="!showheartIconRead"
[class.icon_heart_red]="showheartIconRead">
or<div [ngClass]="showheartIconRead ? 'icon_heart_red' : 'icon_heart'">
這篇關(guān)于如何在角度2中動態(tài)更改css類名的文章就介紹到這了,希望我們推薦的答案對大家有所幫助,也希望大家多多支持html5模板網(wǎng)!
【網(wǎng)站聲明】本站部分內(nèi)容來源于互聯(lián)網(wǎng),旨在幫助大家更快的解決問題,如果有圖片或者內(nèi)容侵犯了您的權(quán)益,請聯(lián)系我們刪除處理,感謝您的支持!