webentwicklung-frage-antwort-db.com.de

Winkel 2 Ändern der Klasse nach Bedingung

Ich habe drei Schaltflächen in einer Ansicht und beim Laden der Seite wird der Inhalt der ersten Schaltflächen angezeigt. Sobald eine Schaltfläche angeklickt wird, wird die Schaltfläche aktiv, aber beim Laden der Seite ist die ursprüngliche Schaltfläche nicht aktiv. Um den ersten Button aktiv anzuzeigen, fügte ich dies zum div hinzu:

[ngClass]="'active'" 

Das Problem dabei ist jetzt, wenn auf eine andere Schaltfläche geklickt wird. Die erste Schaltfläche behält die aktive Klasse bei. Ich bewerte die angezeigten Daten anhand einer Zeichenfolge. Durch Klicken auf jede Schaltfläche ändert sich die Zeichenfolge. 

Wie kann ich eine Bedingung hinzufügen, um nach der aktuellen Zeichenfolge zu suchen? Wenn also die Zeichenfolge mit den aktuellen Daten übereinstimmt, die angezeigt werden, fügen Sie der Schaltfläche die aktive Klasse hinzu.

So etwas suche ich also:

[ngClass]="'active'" if "myString == ThisIsActiveString;

Dies ist meine aktuelle Schaltfläche, aber die Klasse wird nicht hinzugefügt, wenn ich sie in dieser Syntax hinzufüge:

 <button  [class.active]="shown == EQUIFAX" (click)="shown = 'EQUIFAX'" type="button" id="equifax" class="btn btn-secondary">Equifax Report </button>

Um klar zu sein, ist die Zeichenfolge beim Laden der Seite standardmäßig "EQUIFAX".

Dies basiert auf der Antwort:

 <button [ngClass]="'active' : shown == 'EQUIFAX'" (click)="shown = 'EQUIFAX'" type="button" id="equifax" class="btn btn-secondary">Equifax Report </button>
13
wuno

Sie können die Klasse css basierend auf der Bedingung in der Anweisung NgClass selbst hinzufügen:

[ngClass]="{ 'active': myString == ThisIsActiveString }";

Sie können mehr über die NgClass-Direktive lesen und Beispiele hier finden.

17
Stefan Svrkota

Ihre Äquivalenzanweisung von [class.active]="shown == EQUIFAX" wird mit einer Variablen namens EQUIFAX verglichen.

Sie sollten stattdessen die Äquivalenz zum Vergleich mit der Zeichenfolge [class.active]="shown == 'EQUIFAX'" ändern.

Wenn Sie [ngClass] verwenden, erhalten Sie [ngClass]="{'active': shown == 'EQUIFAX'}

Hier ist ein Spielplatz mit diesem implementiert: http://plnkr.co/edit/j2w8aiQPghl0bPZznoF2?p=preview

3
silentsod

du kannst das machen:

[class.nameForYourClss]="myString == ThisIsActiveString ";
2
yanai edri

IN HTML:

<div [style.color]="navColor"></div>

IN TS:

erklärung:

navColor: "white";

Änderung abhängig von der Bedingung:

this.navColor = "black";
0

Wenn Sie zum Beispiel viele Klassen hinzufügen möchten und zwei oder mehr Bedingungen haben, können Sie jede Klasse und Bedingung nach ,-Komma hinzufügen.

Zum Beispiel

[ngClass]="{'first-class': condition,
            'second-class': !condition}"
0
Druta Ruslan