Angular2 - 將CSS類添加到所選元素

Question

我的.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>

所以當加載ul時，第一個元素是活動的。 現在我想將active類添加到選定的<a></a>並切換active 。 我怎樣才能實現它？

編輯：

我簡化到這個：

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

但它不起作用。 這是我的組成部分：

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

在組件中創建一個變量，讓我們將其稱為temp ，然后在click事件中將temp值設置為所選對象：

temp: any;

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

然后在您的模板中，您可以使用NgClass指令來實現您想要的：

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