Ich habe drei Schaltflächen in einer Ansicht und beim Laden der Seite zeige ich den Inhalt der ersten Schaltflächen an. Sobald eine Schaltfläche angeklickt wird, wird die Schaltfläche aktiv, aber beim ersten Laden der Seite wird die erste Schaltfläche nicht aktiviert. Um die erste Schaltfläche aktiv zu zeigen, habe ich diese zum div hinzugefügt:
%Vor%Das Problem ist jetzt, wenn eine andere Schaltfläche angeklickt wird, die erste Schaltfläche die aktive Klasse behält. Ich werte die Daten aus, die basierend auf einer Zeichenfolge angezeigt werden. Beim 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 den aktuellen Daten entspricht, die angezeigt werden, fügen Sie die aktive Klasse zu dieser Schaltfläche hinzu?
So etwas suche ich:
%Vor%Dies ist meine aktuelle Schaltfläche, aber die Klasse wird nicht hinzugefügt, wenn ich sie in dieser Syntax hinzufüge:
%Vor%Um klar zu sein, wird die Zeichenfolge beim Laden der Seite standardmäßig auf "EQUIFAX" gesetzt.
Dies basiert auf der Antwort:
%Vor% Sie können die CSS-Klasse basierend auf der Bedingung in NgClass directory selbst hinzufügen:
Sie können mehr über die NgClass -Direktive lesen und Beispiele finden hier .
Ihre Äquivalenzanweisung von [class.active]="shown == EQUIFAX" wird mit einer Variablen namens EQUIFAX verglichen.
Sie sollten stattdessen die Äquivalenz ändern, die mit der Zeichenfolge [class.active]="shown == 'EQUIFAX'"
Wenn Sie [ngClass] verwenden, erhalten Sie [ngClass]="{'active': shown == 'EQUIFAX'}
Hier ist ein Spielplatz mit diesem implementiert: Ссылка
Tags und Links javascript angular typescript angular2-template angular2-directives