So ändern Sie die css-Klasse dynamisch in den Winkel-2

Ich habe zwei CSS-Klasse name wie folgt

.icon_heart{
     color: #bdbdbd;
}

.icon_heart_red{
    color:#a6b7d4;;
}

Mein HTML ein Herz-Symbol

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

Hier habe ich zwei div-tags, das Herz-Symbol ist der Farbe Grau zunächst und auf das klicken, dass ich es zu Blaue Farbe.

Hier ist meine ts-Datei-code:

  showheartIcon=true;
  showheartIconRed =false;

  setWishlistTrue(id){
    this.showheartIconRed = true;
    this.showheartIcon = false;
  }

  setWishlistFalse(id){
    this.showheartIconRed = false;
    this.showheartIcon = true;
  }

Habe ich zwei Symbole in verschiedenen Farben.

Frage

Statt zwei Herzen-Symbole ist es möglich, die Klasse zu wechseln der icon?

Habe ich gesehen in JavaScript können wir es ändern w3schools einfache Möglichkeit, um die Klasse der div-tag, aber ich bin neu in Typoskript. Wie kann ich die Klasse?

InformationsquelleAutor Mohan Gopi | 2016-09-15

  1. 12
    <div 
    [class.icon_heart]="!showheartIconRead"
    [class.icon_heart_red]="showheartIconRead">

    oder

    <div [ngClass]="showheartIconRead ? 'icon_heart_red' : 'icon_heart'">
    Allerdings, wenn Sie verwenden ionic2 Komponenten (wie <ion-textarea>) diese beiden Optionen nicht funktionieren, ähnlich [ngClass] arbeiten, anders als [Klasse.xx]
    Wie können Sie anders funktionieren? (Ich weiß nicht Ionisch)
    sorry - ich check das immer wieder - und Sie arbeiten ähnlich (wahrscheinlich das andere problem Fall anders Verhalten, in meinem Fall)
    Mehrere Klassen: <div [ngClass]="showheartIconRead ? 'icon_heart_red big' : 'icon_heart small'">
    Mit [ngClass]="..." sollte pregerred onver [class]="..."

    InformationsquelleAutor Günter Zöchbauer

  2. 3

    Zusätzlich zu den oben genannten Antworten. ist dies auch möglich.

    <div class="{{showheartIconRead ? 'icon_heart_red' : 'icon_heart' }}">

    InformationsquelleAutor Sanju M

Schreibe einen Kommentar