Question

我有一堆列表项，并希望在点击后突出显示每个项目。这对我来说很容易用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";
    }
}

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

Answer 1

您需要在班级中创建一个数组来存储项目的突出显示状态：

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

hightlightStatus: Array<boolean> = [];

Answer 2

如果我正确理解了这个问题，我相信你也可以使用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

Answer 3

有很多方法可以实现这一点，而且一切都非常简单。

示例：

<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

Answer 4

通过您的问题标题，您想在单击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');
    }
  }
}

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

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

5 个答案: