Angular中如何根据hasError状态为HTML元素动态添加CSS类

针对你的需求，这里提供两种简洁的实现方式：

方式一：直接使用类绑定语法 #

这种方式最直观，基础类map-report直接写在class属性里，条件类blur-map-report通过[class.类名]的语法绑定到hasError属性：

<div id="map" class="map-report" [class.blur-map-report]="hasError"></div>

原理：当hasError为true时，Angular会自动添加blur-map-report类；为false时则移除该类，map-report类始终保留。

方式二：使用ngClass指令 #

如果后续需要绑定多个条件类，ngClass会更灵活。这里可以用对象语法，键是类名，值是判断条件：

<div id="map" [ngClass]="{'map-report': true, 'blur-map-report': hasError}"></div>

或者因为map-report是固定存在的，也可以拆分写法让代码更清晰：

<div id="map" class="map-report" [ngClass]="{'blur-map-report': hasError}"></div>

原理：对象中值为true的类会被添加到元素上，map-report对应的值是true所以始终存在，blur-map-report的存在与否由hasError的布尔值决定。

内容的提问来源于stack exchange，提问作者san test