Как выделить деление на клик в угловых

Question

У меня есть div с именем booking-list, который я использую для отображения времени бронирования. Здесь при наведении курсора мыши background-color div изменяется, как показано наниже изображение.

Здесь моя проблема, предположим, если я нажму на первые моменты времени (я, сентябрь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] доставлял мне проблемы с множественным выбором, так что вот что я придумал. stackblitz

• мультиселектор / мульти-выбор

Answer 3

Хорошо, так что это довольно легко сделать с помощью 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 }

EDIT

Для множественного выбора вы можете сделать:

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