条件边框颜色

Question

我想根据类别设置项目的边框颜色。我尝试使用[ngStyle]和style.color但它不起作用。 有人能帮我吗 ？

<ion-grid *ngFor="let item of items" (click)="openDetail(item)" [style.color]=" api.getCategoryColor(item.categories[0])">

谢谢

编辑： 它在设置颜色“蓝色”时起作用，例如：

<ion-row [style.border]="'solid 1px ' + 'blue'" >

Answer 1

您可以使用以下方式设置边框颜色：

[style.border-color]="api.getCategoryColor(item.categories[0])"

确保始终存在边框，例如使用类样式：

<ion-grid class="gridBorder" ...>

.gridBorder {
  border-style: solid;
  border-width: 1px;
}

或通过suggested将@fatemefazli绑定到边框样式本身。

如果需要使用SCSS变量，可以将样式类绑定到元素：

<ion-grid class="gridBorder" [ngClass]="api.getCategoryClass(item.categories[0])" ... >

并在每个类中使用SCSS变量设置边框颜色：

.cat1 {
  border-color: $cat1_Color;
}

.cat2 {
  border-color: $cat2_color;
}

Answer 2

尝试：

[style.border]=" '1px solid '+ api.getCategoryColor(item.categories[0])"

检查此工作stackblitz

Answer 3

您需要确保此CSS设置是应用于ion-grid还是应用于反映颜色变化的实际DOM元素。通常，组件本身只是<div>元素。

你可以做的是先找到那个元素，然后直接将CSS作为第一个测试应用于它。如果它可以工作，那么您可以选择将CSS包装在您自己的组件中，或者将CSS保留在全局样式表中。无论哪种方式都是可管理的。