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

Question

我正在调用div booking-list,我用来显示预订时间.在鼠标悬停时,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.