Angular 角度2-选择单击的列表项（添加“活动”类并从同级中删除）_Angular

Angular 角度2-选择单击的列表项（添加“活动”类并从同级中删除）

angular

Angular 角度2-选择单击的列表项（添加“活动”类并从同级中删除）,angular,Angular,我在下面的代码片段中列出了如下项目。单击鼠标，我想选择该项目添加“活动”类，如果删除“活动类”选择了任何其他项目，则取消选择。我已经使用下面的jQuery完整代码实现了同样的功能。如何以2种方式实现功能代码段： <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstr

我在下面的代码片段中列出了如下项目。单击鼠标，我想选择该项目添加“活动”类，如果删除“活动类”选择了任何其他项目，则取消选择。我已经使用下面的jQuery完整代码实现了同样的功能。如何以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>

组.ts

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

您可以将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>

也可以在单击事件期间将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来确定是否将活动类分配给li元素

如果你不相信这个公认的解决方案，并且来自AngularJS的背景，那么这里有一个解决方案

HTML:

组成部分：

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

注：我的ngFor收藏如下 qlist=[ { 品质：“关于我”，身份证号码：1 }] 因此，我使用quality.id来切换类，您可以使用自己的属性来切换。只需将activeElement变量更改为您想要的默认值。

{{item.name} listClickevent，newValue{ console.lognewValue； this.selectedItem=newValue；//别忘了在这里更新模型 //…在这里做其他事情。。。

}角度2还是角度1？很高兴看到您迄今为止所做的工作，以便我们能够改进/纠正它。这似乎只是在问我们完整的答案。Angular 2-用Angular 2代码更新了我的问题。谢谢你，Yaser。在给定的代码列表中单击，请让我知道如何设置所选项目。很抱歉，如果这是一个基本问题，我对Angular 2很陌生。如果我在单击处理程序中更新模型对象，我将如何刷新模板html。@Karan如果更新模型是指项目，那么您需要触发事件或触发更改检测manually@Yaser我也有类似的案例。如果它应该用于聊天列表，并且每个聊天列表项都有click=GoToChatPagechat.receiverId.username并在右侧为您选择的聊天列表用户打开消息，该怎么办？我在这里发布了一个问题：如何重构此代码以适应我的问题？@Artur回答了你的问题Hi Frank，谢谢你的回答。这一个也像预期的那样工作。因为亚瑟先给出答案，所以他接受了这个答案。对不起，我只能选择一个答案。@Frank。先生，你能回答我的问题吗：@Frank Fajardo这是我有过的最简单的解决方案

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

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

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

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

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

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