Question

我在下面的代码段中有以下列表项。在鼠标单击时，我想选择该项目（添加＆＃39;活动＆＃39;类，并取消选择是否通过删除活动类选择的任何其他项目（兄弟）。我使用jQuery实现了相同的功能（完整代码如下））。我如何以Angular 2方式实现功能。

代码段：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="grouplist" class="list-group">
    <li class="list-group-item">Item1</li>
    <li class="list-group-item">Item2</li>
    <li class="list-group-item">Item3</li>
    <li class="list-group-item">Item4</li>
    <li class="list-group-item">Item5</li>
    <li class="list-group-item">Item6</li>
    <li class="list-group-item">Item7</li>
    <li class="list-group-item">Item8</li>
    <li class="list-group-item">Item9</li>
    <li class="list-group-item">Item10</li>
</ul>
<script>
$(function () {
    $('.list-group li').click(function() {
        $(this).addClass('active').siblings().removeClass('active');
    });
})
</script>
</body>
</html>

JSFiddle here

Angular 2实验：我可以通过＆＃39; setElementClass＆＃39;设置课程。如何删除＆＃39; active＆＃39;来自兄弟姐妹的课程？或者还有其他方法吗？

列表视图组件（test1.component.html）：

<h2>Select List Item</h2>

<ul id="grouplist" class="list-group">
    <li class="list-group-item" (click)="listClick($event)" *ngFor="let item of groups">
        {{ item.name }}
    </li>
</ul>

TypeScript代码（test1.component.ts）：

import { Component } from '@angular/core';
import { Renderer } from '@angular/core';
import { Group } from './group';

@Component({
    selector: 'test1',
    template: require('./test1.component.html')
})
export class Test1Component {

    groups: Group[];

    constructor(private render: Renderer) {
        this.groups = [new Group("item1"), new Group("item2"), new Group("item3"), new Group("item4"), new Group("item5")];
    }

    public listClick(event: any) {
        event.preventDefault();
        this.render.setElementClass(event.target, "active", true);
        // How to remove 'active' from siblings ?
    }
}

group.ts

export class Group {
    constructor(public name: String) {
    }
}

Answer 1

您可以将ngClass用于您所寻找的目标：

 <ul id="grouplist" class="list-group">
     <li class="list-group-item" [ngClass]="{'active': selectedItem == item}" (click)="listClick($event, item)" *ngFor="let item of groups">
        {{ item.name }}
     </li>
</ul>

在您的listClick中，只需将所选项目设置为该项目：

listClick(event, newValue) {
    console.log(newValue);
    this.selectedItem = newValue;  // don't forget to update the model here
    // ... do other stuff here ...
}

Answer 2

您还可以在点击事件期间将li元素的索引传递给您的组件：

<ul id="grouplist" class="list-group">
   <li *ngFor="let item of items; let i=index" (click)="select(i)" 
       [ngClass]="{'active': selectedIndex == i, 'list-group-item': true}" >
      {{ item.text }}
   </li>
</ul>

然后让组件设置其selectedIndex属性：

@Component({
  ...
})
export class ItemListComponent {
  ...
  selectedIndex: number;
  select(index: number) {
      this.selectedIndex = index;
  }
}

模板使用selectedIndex来确定是否将active类分配给li元素。

在此Plunker

中查看

Answer 3

对于那些不相信接受的解决方案并且来自AngularJS背景的人，这是为您提供的解决方案。

HTML：

<li *ngFor="let quality of qualities" 
    [ngClass]="quality.id === activeElement ? 'active' : 'none'"
    (click)="selectedItem(quality.id)"
    >
  {{quality.quality}}
</li>

CSS：

.active {
  background-color: #000000;
  color : #ffffff;
}

组件：

public activeElement = 1;  
public selectedItem(id) {
    this.activeElement = id;
 }

注意：我的ngFor的收藏就像 qlist = [ { 质量：“关于我”，编号：1 }] 因此，我使用quality.id切换类，您可以使用自己的属性进行切换。只需将activeElement变量更改为您想要将其设置为默认值即可。

Answer 4

<ul id="grouplist" class="list-group">
     <li class="list-group-item" [ngClass]="{'active': selectedItem == item}" 
     (click)="listClick($event, item)" *ngFor="let item of groups">
        {{ item.name }}
     </li>
    </ul>

listClick(event, newValue) {
     console.log(newValue);
     this.selectedItem = newValue;  // don't forget to update the model here
     // ... do other stuff here ...
    }

要在单击所选项目时应用活动类并将其从另一个元素中删除，请单击

onClickOfOtherElement(){
  this.selectedItem = ''
}

Angular 2 - 选择已点击的列表项（添加＆＃39;活动＆＃39;类并从兄弟姐妹中删除）

4 个答案: