Angular2 - Hinzufügen von CSS-Klasse zu ausgewähltem Elemente

Question

Ich habe den folgenden Code in meinem .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> 

Das erste Element ist aktiv, wenn die ul geladen wird. Nun möchte ich die active Klasse zu der ausgewählten <a></a> hinzufügen und schalten, die active hat. Wie kann ich es erreichen?

EDIT:

ich dies vereinfacht:

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

aber es funktioniert nicht. Dies ist meine Komponente:

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); 
    } 
} 

Answer 1

eine Variable in Ihrer Komponente erstellen, machen sie es temp nennen und dann eingestellt Wert von temp auf ausgewähltes Objekt in der Click-Ereignisse:

temp: any; 

clicked(object) { 
    this.temp = object; 
} 

Und dann in der Vorlage, die Sie kann NgClass Direktive verwenden, um zu erzielen, was du willst:

<ul id="navbar-example" class="nav nav-pills nav-stacked" *ngFor="let object of objects; let i = index;"> 
    <li class="nav-item"> 
     <a id="{{object.code}}" class="nav-link" [ngClass]="{ 'active': temp.code == object.code }" (click)="clicked(object)">{{object.name}}</a> 
    </li> 
</ul>