如何根据userInterests对象的color属性为ion-card设置背景色

方案一：通过ngStyle直接绑定Ionic CSS变量 #

Ionic的预定义颜色（如primary、secondary）在variables.scss中对应全局CSS变量，格式为--ion-color-{颜色名}。利用Angular的ngStyle指令，可直接将卡片背景色绑定到对应变量：

修改后的核心代码：

<ion-col size="6" *ngFor="let item of usersInterest;">
  <!-- 移除重复id，改用class避免HTML规范问题 -->
  <ion-card class="interest-card" [ngStyle]="{'background-color': 'var(--ion-color-' + item?.color + ')'}">
    <ion-avatar>
      <img [defaultImage]="defaultImage" [lazyLoad]="item.profile_pic"/>
    </ion-avatar>
    <div class="card2">
      <div><br /><br /><br /><br /><br /><br /><br /><br /></div>
      <div class="card-title">{{item?.first_name || item?.username }}</div>
      <div class="card-subtitle">{{item?.artisticBehaviour}}</div>
    </div>
  </ion-card>
</ion-col>

若需要使用颜色的浅/深色调，可调整变量后缀：

<ion-card [ngStyle]="{'background-color': 'var(--ion-color-' + item?.color + '-light)'}">

方案二：通过动态类名绑定 #

先在全局样式（如variables.scss或组件SCSS文件）中定义对应颜色的类：

.card-primary {
  background-color: var(--ion-color-primary);
}
.card-secondary {
  background-color: var(--ion-color-secondary);
}
.card-tertiary {
  background-color: var(--ion-color-tertiary);
}
.card-dark {
  background-color: var(--ion-color-dark);
}
// 按需扩展其他颜色类

再在模板中动态绑定类名：

<ion-col size="6" *ngFor="let item of usersInterest;">
  <ion-card class="interest-card" [class]="'card-' + item?.color">
    <!-- 卡片内容保持不变 -->
  </ion-card>
</ion-col>

注意事项 #

• 原代码中循环生成的卡片使用了重复id="card"，不符合HTML规范，已改为class统一管理。
• 使用item?.color可选链操作符，避免item为null/undefined时出现报错。

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