html - Angular2 - Lägga till CSS-klass till valt element

Jag har följande kod i min .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>

Så det första elementet är aktivt när ul laddas. Nu vill jag lägga till active-klassen till den valda <a></a> och växla den som har active. Hur kan jag uppnå det?

REDIGERA :

Jag förenklade till detta:

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

men det fungerar inte. Detta är min komponent:

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

Svar #1

Skapa en variabel i din komponent, låt oss kalla den temp och sedan sätt värdet av temp till det valda objektet i din klickhändelse:

temp: any;

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

Och sedan kan du i din mall använda NgClass-direktivet för att uppnå det du vill:

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

Relaterade artiklar