Angular/Ionic中如何根据循环对象值动态设置卡片左边框颜色

这个问题我太熟了——你踩了全局CSS变量的坑！咱们一步步拆解问题，再给你几个简单靠谱的解决方案：

为什么你的方法失效了？ #

你在NgOnInit里循环给document.body的--my-var赋值，但CSS变量是全局生效的！每次循环都会覆盖这个变量的取值，等循环结束，--my-var只会保留最后一个searchItems对象的color值，所有卡片自然都用同一种颜色了。

解决方案1：直接用Angular动态样式绑定（最推荐） #

这是最简单直接的方式，不用搞额外的JS或者CSS变量，直接把每个卡片对应的office.color绑定到border-left样式上：

<ion-card *ngFor="let office of searchItems" 
          [style.border-left]="'5px solid ' + office.color"
          class="custom">
  <!-- 卡片内容 -->
</ion-card>

Angular会自动为每个卡片生成对应的样式，完全不会冲突。

解决方案2：用ngStyle指令（适合多样式绑定场景） #

如果你的卡片需要绑定多个动态样式，用ngStyle会让代码更清晰：

<ion-card *ngFor="let office of searchItems" 
          [ngStyle]="{ 'border-left': '5px solid ' + office.color }"
          class="custom">
  <!-- 卡片内容 -->
</ion-card>

效果和方案1完全一致，只是写法更结构化。

解决方案3：保留CSS变量，但用局部变量（适合需要复用变量的场景） #

如果你确实需要用CSS变量（比如这个颜色还要用到卡片其他元素上），那别用全局变量，给每个卡片单独设置局部的--my-var：

<ion-card *ngFor="let office of searchItems" 
          [style.--my-var]="office.color"
          class="custom">
  <!-- 卡片内容 -->
</ion-card>

你的CSS可以保留原来的写法：

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

这样每个卡片的--my-var都是独立的，不会被其他卡片覆盖，完美实现每个边框对应不同颜色。

内容的提问来源于stack exchange，提问作者Grant Solomons