时间戳

首页 > 解决方案 > 条件边框颜色

angular - 条件边框颜色

问题描述

我想根据项目的类别设置项目的边框颜色。我尝试使用 [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'" >

标签： angularionic-framework

解决方案

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

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

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

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

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

或通过绑定边框样式本身，如@fatemefazli所建议的那样。

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

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

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

.cat1 {
  border-color: $cat1_Color;
}

.cat2 {
  border-color: $cat2_color;
}

推荐阅读