如何在 Angular 的边框颜色中从 API 响应中设置颜色？答案

【问题标题】：How to set color from API response in border-color in Angular?如何在 Angular 的边框颜色中从 API 响应中设置颜色？
【发布时间】：2021-08-12 01:09:30
【问题描述】：

我从 API 响应中获得 categoryColor，并且我已将 border-left: 3px solid {{element.categoryColor}} 设置为内联样式。它工作正常，开发中没有任何其他问题，但在 Visual Studio 中，文件名中显示为红色，如下图所示。

所以我想使用正确的语法或最佳实践来使用内联样式在结构中应用颜色。

【问题讨论】：

【解决方案1】：

Angular 有 attribute binding 在这种情况下应该使用它。

如果我是你，我会将所有内容从 style 移动到某个 css 类，然后在这个 span 元素中我会使用 [style.borderColor]="element.categoryColor"
像这样：

.some-class {
    border-left: 3px solid transparent;
    /* ... */
}

<span class="some-class" [style.borderColor]="element.categoryColor"></span>

但你也可以这样使用它：

<span style="border-left: 3px solid transparent;" [style.borderColor]="element.categoryColor"></span>

【讨论】：

【解决方案2】：

最好的方法是使用 [ngStyle]。

<span [ngStyle]="{ 'border-color': getBorderColor() }">Your content</span>

对于边框颜色，您可以使用从 api 响应中获取颜色代码的函数，该函数应返回 css 语法，例如 2px solid purple。

【讨论】：