Angular2 - 将 CSS 类添加到选定元素

Posted 2023-02-22

【中文标题】Angular2 - 将 CSS 类添加到选定元素

【英文标题】：Angular2 - Adding CSS class to selected element

【发布时间】：2017-02-28 03:38:51

【问题描述】：

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

【参考方案1】：

在您的组件中创建一个变量，我们将其命名为temp，然后将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>

【讨论】：

它对我不起作用。看active 是<a> 的一个类。我更新了我的帖子

@FacundoGFlores console.log(this.selected); 打印您选择的对象吗？

是的，而且是第一个

@FacundoGFlores 哦，我犯了一个愚蠢的错误，你不能像那样比较对象。我稍后会编辑我的帖子，您需要比较 object.code 或其他一些唯一值而不是整个对象。

@FacundoGFlores 很高兴我能提供帮助。只需确保object.code 或您用作比较的任何值是唯一的，因为如果您在多个对象中具有相同的object.code，则所有对象都将获得active 类。