如何应用条件式CSS？

Question

我有一个组件item，代表带有该物品数据的卡片。由于所有卡都具有相同的结构（每张卡上都显示了价格/颜色/尺寸/照片类别，仅此而已，因此，我想应用条件CSS，但我不知道如何操作，因为这些卡'的样式（略有不同）基于：

• 价格（例如，如果价格较低，则卡较大）
• 如果用户已将其标记为收藏夹
• 它们是否是此组件或该组件的一部分（URL可以相同）。例如，在单个视图中，第一个组件具有X卡样式，第二个组件具有Y卡样式-但这些卡具有相同的数据。

我真的会提出任何建议！

Answer 1

您可以使用NgClass添加条件类。有关更多信息，请参阅文档-https://angular.io/api/common/NgClass

Answer 2

<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/