javascript - ionic 2 : Add Class to Item While Removing Class From Other Items

Question

我有一个充满按钮的 div，单击这些按钮时，应该添加一个类 (selected-date-item) 来更改按钮的颜色。紧接着，我想从之前拥有该类的任何按钮中删除该类 (selected-date-item)。

CSS

.selected-date-item {
  background:#272829;
  color:white;
}

HTML

<button class="date-time-select" *ngFor="let chooseDate of possibleDates" (tap)="selectPickupDate(chooseDate)">{{chooseDate}}</button>

JS

selectPickupDate(selectedDate) {
  this.selectedDate = selectedDate;
}

=>

Answer 1

使用 [ngClass] 指令动态设置 CSS 类。

<button [ngClass]="{'selected-date-item': chooseDate == selectedDate, 'not-selected-item': chooseDate != selectedDate}" *ngFor="let chooseDate of possibleDates" (tap)="selectPickupDate(chooseDate)">{{chooseDate}}</button>

[ngClass] 分解:

[ngClass]="{'selected-date-item': chooseDate == selectedDate, 'not-selected-item': chooseDate != selectedDate}"