Angular2 - Ajout de la classe CSS de l'élément sélectionné
J'ai le code suivant dans mon .html
:
<ul id="navbar-example" class="nav nav-pills nav-stacked" *ngFor="let object of objects; let i = index;">
<li class="nav-item" *ngIf = "i==0">
<a id="{{object.code}}" class="nav-link active" (click)="clicked(object)">{{object.name}}</a>
</li>
<li class="nav-item" *ngIf = "i!=0">
<a id="{{object.code}}" class="nav-link" (click)="clicked(object)">{{object.name}}</a>
</li>
</ul>
Ainsi, le premier élément est actif lorsque la ul
est chargé. Maintenant, je veux ajouter le active
classe choisie <a></a>
et de bascule qui qui a active
. Comment puis-je l'atteindre?
EDIT:
J'ai simplifié:
<ul id="navbar-example" class="nav nav-pills nav-stacked" *ngFor="let object of objects;">
<li class="nav-item" >
<a [ngClass]="{ 'active': selected == object }"(click)="clicked(object)">{{object.names}}</a>
</li>
</ul>
mais il ne fonctionne pas. C'est mon composant:
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { objectsService } from './objects.service';
import { object } from './object';
@Component({
selector: 'objects',
styles: [require('./object.css')],
template: require('./objects.html'),
})
export class objects implements OnInit {
objects: object[];
codvisita: string;
selected: any;
constructor(private route: ActivatedRoute, private objectsService: objectsService) {
}
ngOnInit() {
this.route.params.forEach((params: Params) => {
this.codvisita = params['id'];
});
this.objectsService.getobjects(this.codvisita)
.subscribe(
objects => {
this.objects = objects;
this.selected = this.objects[0];
console.log(this.selected);
}
);
}
clicked(e) {
this.selected = e;
console.log(this.selected);
}
}
OriginalL'auteur FacundoGFlores | 2016-10-18
Vous devez vous connecter pour publier un commentaire.
Créer une variable dans votre composant, nous allons l'appeler
temp
et puis définissez la valeur detemp
à l'objet sélectionné dans votre cliquez sur l'événement:Et puis dans votre modèle, vous pouvez utiliser
NgClass
directive, d'atteindre ce que vous voulez:active
est une classe pour<a>
. J'ai mis à jour mon postimprimer l'objet que vous sélectionnez?
Oui, et c'est une première
Maintenant ça marche!!!, bonne observation!
Content d'avoir pu aider. Assurez-vous juste que
object.code
ou de quelque valeur que ce soit vous utilisez la comparaison est unique, car si vous avez mêmeobject.code
dans de multiples objets, tous seactive
classe.OriginalL'auteur Stefan Svrkota