Angular 2 - Ausgewähltes Listenelement auswählen ('active' Klasse hinzufügen und aus den Geschwistern entfernen)

10

Ich habe Listenelemente wie folgt im folgenden Code-Snippet. Mit einem Mausklick möchte ich dieses Element auswählen (addiere 'aktive' Klasse und deaktiviere, wenn andere Elemente (Geschwister) von 'remove'active class ausgewählt wurden. Ich habe dasselbe erreicht mit jQuery (vollständiger Code unten). Wie kann ich das erreichen? Funktionalität in Angular 2-Wege.

Codeausschnitt:

%Vor%

JSFiddle hier

Angular 2 Experiment: Ich kann die Klasse über 'setElementClass' setzen. Wie 'aktive' Klasse von Geschwistern zu entfernen? Oder gibt es andere Ansätze?

Listenansichtskomponente (test1.component.html):

%Vor%

TypeScript-Code (test1.component.ts):

%Vor%

group.ts

%Vor%     
RK_Aus 06.12.2016, 01:44
quelle

2 Antworten

14

Sie können ngClass für das verwenden, was Sie suchen:

%Vor%

Und in deinem listClick setze einfach das ausgewählte Element auf dieses Element:

%Vor%     
Yaser 06.12.2016, 04:54
quelle
9

Sie können auch den Index des Elements li während eines Klickereignisses an Ihre Komponente übergeben:

%Vor%

Dann lassen Sie die Komponente ihre Eigenschaft selectedIndex festlegen:

%Vor%

Das selectedIndex wird von der Vorlage verwendet, um zu bestimmen, ob die Klasse active dem Element li zugeordnet werden soll.

Siehe in diesem Plunker

    
Frank Fajardo 06.12.2016 05:45
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Java-Stack- und Heap-Speicherverwaltung