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

Question

我正在使用名为booking-list的div，我用它来显示预订时间。在鼠标悬停时，div的背景颜色正在变化，如下图所示。

在这里，我的问题是，假设我点击第一个时间（i，9月1日），div的背景将被更改，背景颜色应该保持不变，直到我点击下一个时间。下面这样的图像。我得到了资源列表组件，但我无法将其应用于div

这是stackblitz链接。

Answer 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);
   }

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