css - 根据 Angular 条件修改 CSS 类

Question

这个 div block 在具有特定高度的正方形内显示一个列表

div1 蓝色方 block
div2 用于
div3 如果

我的blueSquare Div是一个list的wrap，设置为不显示。

我需要在满足条件后显示 blueSquare div，否则，保持不可见

对了，div的顺序是不能修改的

谢谢!!

我尝试将类设置为不显示，然后在条件运行脚本后将其设置为 block ，我还尝试了 ngClass。我相信这些都行，但我很难过

<div  class="event if">
 <div *ngFor="let course of courseList| async|courseSections:courseNO; let index = index">
    <div   *ngIf="verifyThursday(course) && verifyTime(course) " >

            {{ course.TITLE }}
            {{ course.ROOM }

.event {
    padding: 0.2rem;
    overflow-x: hidden;
    overflow-y: auto;
    height: 40px;    
    display: none;
}

仅当列表中有元素时才显示正方形

Answer 1

<div class="event double" [ngClass]="fullfilled ? 'd-block' : 'd-none'">
...
</div>

d-block & d-none 来自 Bootstrap。