問題描述
我有兩個(gè)CSS類名如下
.icon_heart{顏色:#bdbdbd；}.icon_heart_red{顏色:#a6b7d4;;}我的 HTML 有一個(gè)心形圖標(biāo)
<div class="icon_heart" *ngIf="showheartIcon">這里我有兩個(gè) div 標(biāo)簽，心形圖標(biāo)最初是灰色，點(diǎn)擊后我會(huì)將其更改為藍(lán)色.
這是我的 ts 文件代碼:
showheartIcon=true;showheartIconRed =假；setWishlistTrue(id){this.showheartIconRed = true;this.showheartIcon = false;}setWishlistFalse(id){this.showheartIconRed = false;this.showheartIcon = true;}我有兩個(gè)不同顏色的圖標(biāo).
問題
是否可以更改圖標(biāo)的類別而不是兩個(gè)心形圖標(biāo)?
我在 JavaScript 中看到我們可以更改它w3schools 簡(jiǎn)單的方法將類應(yīng)用于 div 標(biāo)簽，但我是 TypeScript 的新手.如何更改班級(jí)?
或
<div [ngClass]="showheartIconRead ? 'icon_heart_red' : 'icon_heart'">I have two CSS class name as follows
.icon_heart{
color: #bdbdbd;
}
.icon_heart_red{
color:#a6b7d4;;
}
My HTML has a heart icon
<div class="icon_heart" *ngIf="showheartIcon">
<ion-icon name="heart" (click)="setWishlistTrue(category.product_id);" class="heart"></ion-icon>
</div>
<div class="icon_heart_red" *ngIf="showheartIconRed">
<ion-icon name="heart" (click)="setWishlistFalse(category.product_id);" class="heart"></ion-icon>
</div>
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中動(dòng)態(tài)更改css類名的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！