переопределить класс CSS, используя ngClass Angular 5 - PullRequest
0 голосов
/ 15 декабря 2018

У меня есть компонент календаря с днями в месяце.

Я поместил 2 класса CSS в дневную ячейку с разными цветами, один для isToday и один для isWeekend, и он работает, если они не совпадаютдень, но если они находятся в один и тот же день, дневная ячейка будет иметь класс css для isWeekend, и я хочу использовать другой класс 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 приоритетным?

Ответы [ 2 ]

0 голосов
/ 15 декабря 2018

удалить weekend-cell-month, когда сегодня день

[ngClass]="{'weekend-cell-month':((day.weekDay === 0 || day.weekDay === 6)&& !day.isToday), 
'today-cell-month':day.isToday }"
0 голосов
/ 15 декабря 2018

Попробуйте это

<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>

Будет применяться класс неделя-ячейка-месяц, если день выходной, а не день сегодня, а если день сегодня, то ячейка класса сегодня будетприложенное.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...