【问题标题】：How to apply conditional css?如何应用条件CSS？
【发布时间】：2019-10-24 18:10:04
【问题描述】：
我有一个组件item，它代表一张包含该项目数据的卡片。由于所有卡片都具有相同的结构（每张卡片上都显示价格/颜色/尺寸/照片类别，仅此而已），我想应用条件 CSS，但我不知道如何，因为卡片' 风格不同（略有）基于：
- 价格（例如，价格越低卡越大）
- 如果用户已将其标记为收藏
- 它们是否是这个或那个组件的一部分（URL 可以相同）。例如，在单个视图中，第一个组件具有 X 卡样式，第二个组件具有 Y 卡样式 - 但这些卡具有相同的数据。
我真的很欢迎任何建议！
【问题讨论】：
标签：
css
angular
angular-material
【解决方案1】：
<div [className]="'example-class'"></div>
这允许我们根据条件添加类：
<div [className]="condition ? 'example-class' : 'other-class'"></div>
或者我们可以在运行时构建类名：
<div [className]="'class' + someValue"></div>
我们可以像这样轻松切换 CSS 类：
<div [class.example-class]="condition"></div>
我们可以分配一个变量类名：
<div [ngClass]="seleted-class"></div>
NgClass 也可以同时分配多个静态类名：
我们还可以使用 ngClass 来根据多个条件分配多个 CSS 类。
<div
[ngClass]="{
'example-class': condition,
'other-class': !condition
}"
></div>
<div [ngClass]="['example-class', 'other-class']"></div>
来源：https://malcoded.com/posts/angular-ngclass/