根据Angular 6中的变量更改更改html5类？

Question

如何根据模型变量中分配的值在html元素中添加/删除类。例如，我在Angular组件中有一个value变量：

export class SomeComponent implements OnInit {
    value: number = 6;
    ...
}

现在，基于该值（经常通过事件监听器更新），我想在条件为true时在html元素中添加/删除一个类：

<div [ngClass]="value >= 3 ? 'bordered-section' : ''"></div>

<div [ngClass]="value >= 6 ? 'bordered-section' : ''"></div>

我认为我设法使它在初始化上起作用，但是当变量再次更改时，不会删除类。我该怎么解决？

Answer 1

<div [ngClass]="{'bordered-section' : value >= 3 }"></div>

<div [ngClass]="{'bordered-section' : value >= 6 }"></div>

应该通过这种方式工作，ngClass应该获得一个具有类名称的对象

Answer 2

尝试这种方式

<div [ngClass]="{'bordered-section1' : value == 3 , 'bordered-section2' :value > 5 }"></div>

也可以通过这种方式

<div [ngClass]="{'bordered-section' : value >= 3 || value <=6 }"></div>

您可以使用ngClass指令基于布尔表达式添加或删除类