内部样式* ng依赖于迭代

Question

我很难根据迭代在*ngFor内创建一个样式。我的模板如下所示：

<div
    *ngFor="let color of options.colors"
    <!--attempt to apply style using color variable-->
>
</div>

其中，选项只是object，其属性color的类型为Array<string>。这些是我到目前为止所做的尝试：

style="border-color: {{color}} !important"
style="{{'border-color: ' + color + ' !important'}}"

这两个都在控制台中产生以下输出：

Angular.io概述了为什么会出现这种情况here，理由是这可以防止XSS攻击。页面不会中断，但颜色根本不会应用;我会使用其中一个CSS文件中的默认颜色。

我想我会改为使用Angular-y方法：

[style.border-color]="{{color}} !important"
[style.border-color]="{{color + ' !important'}}"
[ngStyle]="{ 'border-color': '{{color}} !important' }"
[ngStyle]="{{'{ border-color: ' + color + ' !important }'}}"

编辑：还

[attr.style]="'border-color: {{color}} !important'"

但所有这些尝试都会产生以下错误或类似的错误：

（如果它产生了显着差异，那么特别是那些尝试中的第三个引发了这个错误。）

我对[style.*characteristic*]和[ngStyle]的理解非常有限，我似乎无法在网上找到任何解释如何在*ngFor中使用它们的内容。

有人能指出我做错了吗？

Answer 1

当你使用属性绑定`[style.border-color]＆＃39;指定的值是属性。所以你不需要插值。

以下是我的代码中的示例：

                        <img *ngIf='showImage'
                             [src]='product.imageUrl'
                             [title]='product.productName | uppercase'
                             [style.width.px]='imageWidth' 
                             [style.margin.px]='imageMargin'>

其中imageWidth和imageMargin是属性。

所以你需要更像这样的东西：

[style.border-color]="color"

这与颜色变量绑定。