如何在角度点击中突出显示div

Question

我有一个名为booking-list的div，用于显示预订时间。在鼠标上将 div 的背景颜色悬停在如下图所示进行更改。

在这里，我的问题是，假设我单击第一个时间点（即9月1日），div的背景将被更改，并且背景颜色应保持恒定，直到我单击下一个时间点为止。图像如下图所示。获得了列表组件的资源，但我无法将其用于 div

这是stackblitz链接。

Answer 1

一种方法是在单击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。

Answer 2

好，所以使用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); }

Answer 3

我发现[ngClass]给我多个选择的问题，所以这是我想出的。 stackblitz

• 多重选择器/多重选择