如何在角度单击时突出显示 div答案

【问题标题】：How highlight a div on click in angular如何在角度单击时突出显示 div
【发布时间】：2019-07-06 04:42:50
【问题描述】：

我有一个名为 booking-list 的 div，我用它来显示预订时间。鼠标悬停在此处 div 的 background-color 正在更改为如下图所示。

这里我的问题是，假设我点击第一个时间（即 september1），div 的背景将被更改，并且背景颜色应该保持不变，直到我点击下一个时间。如下图所示。我获得了 list 组件 的资源，但我无法将其应用于 div

这是stackblitz 链接。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

好的，所以使用 ngClass 很容易做到这一点。您在 CSS 中创建了一个突出显示类。这将做的是检查条件是否为真并应用 css。

然后你在ngFor中做：

*ngFor="let item of item; let i = index;" (click)="setRow(i)" [ngClass]="{'highlight': selectedIndex === i}"

然后在你的组件中：

public setRow(_index: number) { this.selectedIndex = _index;

在您的 CSS 中，您可以执行以下操作：

.highlight{ background-color: green }

编辑

对于多选，您可以这样做：

[ngClass]="{'highlight': selectedIndexs.indexOf(i)}

public setRow(_index: number) { if (this.selectedIndexs.indexOf(_index) === -1) { this.selectedIndexs.push(_index); } else { let index = this.selectedIndexs.indexOf(_index); this.selectedIndexs.splice(index, 1); }

【讨论】：

或者更简单（更简洁，恕我直言），存储突出显示的批次，而不是存储其索引：stackblitz.com/edit/angular-material-icon-sytrlq?file=app/…。如果您在突出显示的批次的索引之前添加或删除批次，或者如果您对批次进行排序，则如果您存储索引，则选择将会改变。如果您存储批次本身，则不会。
欢迎您。还添加了一个基本示例，如何通过多选来执行此操作。只有 setRow 需要一些编辑，如果已经在数组中，可能会删除索引，如果取消选择它。

【解决方案2】：

一种方法是在单击 div 时存储所选项目，然后使用 ngClass 指令将类应用于所选项目：

标记：

<div class="booking-list" 
   *ngFor="let batch of batches" 
   (click)="onClick(batch)" 
   [ngClass]="{ 'selected': batch == selectedItem }">

组件：

selectedItem = null;

  public batches: IBatch[] = [
    {name: 'Regular', month: 'September 1', time: '10:30 AM - 5:00 PM' , slots: '20/25', color: 'blue'  },
    {name: 'Weekend', month: 'September 10', time: '10:30 AM - 5:00 PM' , slots: '15/25', color: 'red'  },
    {name: 'Weekend', month: 'August 10', time: '12:30 AM - 8:00 PM' , slots: '21/25', color: 'red'  },
  ];

  onClick(item) {
    this.selectedItem = item;
  }

css:

.selected {
  background-color: aqua;
}

这是更新后的StackBlitz。

【讨论】：

感谢您的回复...:)

【解决方案3】：

我发现 [ngClass] 给我带来了多选问题，所以这就是我想出的。 stackblitz

多选/多选

【讨论】：