Angular 2 - 选择单击的列表项（添加“活动”类并从兄弟姐妹中删除）答案

【问题标题】：Angular 2 - Select clicked list item (Add 'active' class and remove from siblings)Angular 2 - 选择单击的列表项（添加“活动”类并从兄弟姐妹中删除）
【发布时间】：2017-04-20 13:36:14
【问题描述】：

我在下面的代码 sn-p 中有如下列表项。在鼠标单击时，我想选择该项目（添加“活动”类并取消选择如果删除“活动”类选择的任何其他项目（兄弟姐妹）。我使用 jQuery 实现了相同的操作（下面的完整代码）。我如何实现Angular 2 中的功能。

代码sn-p：

<!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 实验：我可以通过“setElementClass”设置类。如何从兄弟姐妹中删除“活动”类？或者有其他方法吗？

列表视图组件（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) {
    }
}

【问题讨论】：

Angular 2 还是 Angular 1 ？很高兴看到您到目前为止所做的事情，因此我们可以改进/纠正它。这似乎只是在向我们询问完整的答案。
Angular 2 - 用我的 Angular 2 代码更新了我的问题。

标签： angular

【解决方案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 ...
}

【讨论】：

谢谢你，亚瑟。在给定的代码 (listClick()) 中，请告诉我如何设置所选项目。抱歉，如果这是一个基本问题，我对 Angular 2 还是很陌生。
如果我在点击处理程序中更新模型对象，我将如何刷新模板 html。
@Karan 如果更新模型是指item，那么您需要触发事件或手动触发更改检测
@Yaser 我有一个类似的案例。如果它应该用于聊天列表并且每个聊天列表项都有 (click)="GoToChatPage(chat.receiverId.username)" 并在右侧为您选择的聊天列表用户打开消息怎么办？我在这里发布了一个问题：stackoverflow.com/questions/53691060/…我如何重构此代码以适应我的问题？
@Artur 回答了你的问题

【解决方案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>

然后让你的组件设置它的selectedIndexproperty：

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

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

在这个Plunker看到它

【讨论】：

嗨弗兰克，谢谢你的回答。这也可以按预期工作。由于 Yaser 首先给出答案，因此接受了该答案。抱歉，我只能选择一个答案。
@Frank。先生，您能回答我的问题吗：stackoverflow.com/questions/59154020/…
@Frank Fajardo 这是我有过的最简单的解决方案?

【解决方案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 变量更改为您希望将其设为默认值的任何值。

【讨论】：

【解决方案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 = ''
}

【讨论】：