Question

我有一个日历组件，每个月中有几天。

我在一个具有不同颜色的日单元格中放置了两个css类，一个用于isToday，一个用于isWeekend，如果它们不在同一天，则可以工作，但是如果它们在同一天，则日单元将具有isWeekend的CSS类，我想使用另一个isToday类。

有我的html代码

<div class="row-calendar">
        <div class="day-number" *ngFor="let day of days" [ngClass]="{'today-cell-month':day.isToday === true, 'weekend-cell-month':(day.weekDay === 0 || day.weekDay === 6)}">
            <label class="number-label"><span class="day-color"> {{day.name}}</span></label>
        </div>
    </div>

我试图更改订单

[ngClass]="{'weekend-cell-month':(day.weekDay === 0 || day.weekDay === 6), 'today-cell-month':day.isToday === true,}

因为我认为周末的课程比今天的课程好，但也不起作用如何使今天的CSS班级具有优先权？

Answer 1

删除当天的weekend-cell-month

[ngClass]="{'weekend-cell-month':((day.weekDay === 0 || day.weekDay === 6)&& !day.isToday), 
'today-cell-month':day.isToday }"

Answer 2

尝试一下

<div class="row-calendar">
    <div class="day-number" *ngFor="let day of days" [ngClass]="(day.weekDay === 0 || 
    day.weekDay === 6) && !day.isToday?'weekend-cell-month':'today-cell-month'">
        <label class="number-label"><span class="day-color"> {{day.name}}</span></label>
    </div>
</div>

如果一天是周末而不是今天，则将应用“每周单元格”月课程，如果今天是今天，则将应用“今天”单元格。

使用ngClass Angular 5覆盖CSS类

2 个答案: