【问题标题】:Ionic 2: Add Class to Item While Removing Class From Other ItemsIonic 2:将类添加到项目,同时从其他项目中删除类
【发布时间】:2018-01-02 10:49:57
【问题描述】:

我有一个充满按钮的 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;
}

=>

【问题讨论】:

  • 类似于
  • @Rienk 有点困惑 - 是否有需要关闭的括号?
  • 是的,需要打开括号:[ngClass]="-->(

标签: javascript html css angular ionic-framework


【解决方案1】:

使用[ngClass]-directive 动态设置 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}"

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-04-08
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多