Angular2 - 单击时将类添加到项目答案

【问题标题】：Angular2 - Add class to item on clickAngular2 - 单击时将类添加到项目
【发布时间】：2016-06-17 23:31:52
【问题描述】：

我有一堆列表项，并且希望在单击后突出显示每个项。这对我来说很容易在 jQuery 甚至 JavaScript 中完成，但在 Angular2 中我迷失了。

<ul>
   <li [attr.data-selected]="false" (click)="highlightItem($event)" [class.highlight]="isHighlighted($event)" *ngFor="#item of items"> {{item}} </li>
</ul>

我的组件

export class HelloWorld {
    items = ["pineapples", "apples", "tomatoes", "bread"];

    highlightItem(event) {
        event.target.setAttribute("data-selected", "true");
   }

   isHighlighted(event) {
       return event.target.getAttribute("data-selected") == "true";
    }
}

不确定我的错误在哪里，或者我是否使用了错误的方法

【问题讨论】：

标签： angular

【解决方案1】：

如果我正确理解了这个问题，我相信您也可以使用 angular2 的渲染来获得与您的示例代码类似的代码。对于我自己的项目，我做了以下事情：

在我的模板中我有：

<li role="presentation" (click)="userTypeSelect($event)" ><a href="#">Local</a></li>

然后在我的组件中：

import {Renderer} from '@angular/core';
//other imports

export class SignupComponent implements OnInit {

      constructor(private render:Renderer) { }

      userTypeSelect(event:any){
        event.preventDefault()
        this.render.setElementClass(event.target,"active",false);
      }

}

值得注意的是，虽然我没有将它用于项目列表，但我相信它仍然可以工作。

对渲染器的引用：Renderer Api Docs

【讨论】：

在我的情况下它不起作用。所以我不得不使用setElementAttribute。 let oldClasses = event.target.getAttribute('class'); this.renderer.setElementAttribute(event.target, "class", oldClasses + ' selected');

【解决方案2】：

有很多方法可以实现，而且都很简单。

示例：

<li *ngFor="let n of list" (click)="select(n)" [ngClass]="{active: isActive(n)}">
  <a>{{n}}</a>
 </li>

 select(item) {
      this.selected = item; 
  };
  isActive(item) {
      return this.selected === item;
  };

仅使用 html

<li *ngFor="let n of list" [class.active]="clicked === n" 
         (click)="clicked = n">
       <a>{{n}}</a>
    </li>

点击时添加类，如果我们点击相同的类则删除

select(item) {
   this.selected = (this.selected === item ? null : item); 
};

仅使用 html

<li *ngFor="let n of list" [class.active]="clicked === n" 
       (click)="clicked = (clicked === n ? null :n)">
     <a>{{n}}</a>
   </li>

More info

【讨论】：

【解决方案3】：

通过您的问题标题，您想在点击 li 时添加一个新的类，对吗？

如果是这样，那么它可以像这样简单：

 <ul>
   <li (click)="highlightItem($event)" *ngFor="let item of items">
     {{item}}
   </li>
 </ul>

export class HelloComponent {
  public items: string = ['Apple', 'Banana', 'Pear', 'Grapes', 'Watermelon'];

  public highlightItem(event) {
    if (! event.target.classList.contains('highlighted')) {
      event.target.classList.add('highlighted');
    }
  }
}

【讨论】：

【解决方案4】：

你需要在你的类中创建一个数组来存储项目的高亮状态：

hightlightStatus: Array<boolean> = [];

在与ngFor关联的模板中声明局部变量：

<ul>
   <li [attr.data-selected]="false" 
       (click)="hightlightStatus[i]=!hightlightStatus[i]" 
       [class.highlight]="hightlightStatus[i]" 
       *ngFor="let item of items, let i = index"> 
       {{item}} 
   </li>
</ul>

【讨论】：

这对我来说不太适用，但我相信你是正确的。可能与 plunker 和我的 angular 版本有关
对不起，忘了说。您的代码看起来像 Angular 2 测试版（#item of items、# 用于测试版）。我的 - Angular 2 RC1

【解决方案5】：

它可以帮助你

export class ContactComponent implements OnInit {

  values:Object[];


  ngOnInit() {
    this.values=[{name:'Alex',done:false},{name:'Jon',done:false}];
  }

  completed(i:number){
    if(this.values[i])
      this.values[i]['done']=!this.values[i]['done'];
  }

}

HTML：

<ul>
    <li *ngFor="let v of values;let i='index'" 
        (click)='completed(i)'
        [class.checked]="v.done" 
        >       
        {{v.name}}<span class="close">×</span>
    </li>
</ul>

【讨论】：