根据Angular条件修改CSS类

Question

此div块在具有特定高度的正方形内显示列表

div1 blueSquare
div2 for
div 3 if

我的blueSquare Div是一个列表的包装，它被设置为无显示。

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

顺便说一句，div的顺序不能修改

谢谢！！

我尝试将类设置为nonedisplay，然后在条件满足后运行一个脚本将其设置为块，我还尝试了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>

CCD_ 2&d-none来自Bootstrap。

Answer 2

在组件类中，声明一个布尔属性并使用您的逻辑更新其值：

fulfilled: boolean;
updateFulfillment() {
this.fulfilled = course.DAY === 'Thursday' && course.START === '800' ? true : false;
}

之后，有几种方法可以使用模板中的属性绑定来实现：

1. 使用*ngIf来显示/隐藏元素-这将从DOM中完全删除该元素：

<div *ngIf="fulfilled">...</div>

2. 使用样式绑定-元素在DOM中，但不显示：

<div [style.display]="fulfilled ? 'block': 'none'>...</div>

3. 如果您有一个预先制作的用于显示/隐藏的类，请使用[ngClass]：

<div [ngClass]="fulfilled ? 'class-to-show': 'class-to-hide'>...</div>

在第三个选项中，如果没有用于隐藏状态的类，也可以指定null。