根据循环中的对象值动态设置边框左侧颜色

Question

我的目标是让卡片的左边框看起来像这样：

循环如下：

<ion-card *ngFor="let office of searchItems" class="custom">

理想情况下，我喜欢使用字符串插值，例如：

style="border-left: 5px solid office.color"

使用循环中的“办公室”获取每张卡片的办公室颜色

我求助于设置 class="自定义"

css:

.custom {
  border-left: 5px solid var(--my-var);
  }

JS:

 setStyle(value: string): void {
this.elementRef.nativeElement.style.setProperty('--my-var', value);

}

然后在 NgOnInit() 中我有：

for (let i in this.searchItems){
        document.body.style.setProperty('--my-var', this.searchItems[i].color);
        console.log(this.searchItems[i].color);

      }

this.searchItems 看起来像这样：

但是尽管对象颜色不同，但左边框的卡片看起来像这样：

Answer 1

如何在 html 模板中使用以下内容：

[style.border-left]="'5px solid ' + office.color"

根据循环中的对象值动态设置边框左侧颜色

Setting border left color dynamically depending on object value from a loop

ionic-framework

angular