在Angular的*ngFor循环中根据数组为动态Ionic卡片设置按钮颜色

你可以通过Angular的动态样式绑定，直接关联Ionic按钮的CSS变量实现需求，修改方法如下：

核心修改点 #

找到ion-button的标注位置，添加动态样式绑定属性，将COLORWEB字段的色值绑定到按钮的背景色变量上：

<!-- 替换原来的ion-button标签即可 -->
<ion-button [style.--background]="MyApp.DoData(itemDotaz.COLORWEB)" [style.--color]="#ffffff">
  <ion-icon name="brush-outline"></ion-icon>
</ion-button>

上述代码中[style.--background]绑定的是按钮背景色，[style.--color]绑定的是按钮内图标/文字的颜色，你可以根据需求调整。

修改后完整模板参考 #

<ion-card class="coworker-card" *ngFor="let itemDotaz of MyApp.json_articoli">
  <ion-card-header >
    <ion-card-title>
      <ion-button [style.--background]="MyApp.DoData(itemDotaz.COLORWEB)" [style.--color]="#ffffff">
        <ion-icon name="brush-outline"></ion-icon>
      </ion-button>
      {{MyApp.DoData(itemDotaz.DESART)}} {{MyApp.DoData(itemDotaz.COLORWEB)}}
    </ion-card-title>
    
  </ion-card-header>

  <ion-card-content>
      sono preseni {{itemDotaz.QTAART}} articoli di tipo {{MyApp.DoData(itemDotaz.CODART)}}
  </ion-card-content>
</ion-card>

</ion-content>

注意事项 #

• 你提供的示例数据中#05gg00为无效十六进制色值，十六进制色仅支持0-9、A-F/a-f范围的字符，修正后对应颜色才能正常生效
• 如果需要适配按钮的悬停、点击激活状态的颜色，可以对应绑定--background-hover、--background-activated等Ionic按钮内置CSS变量
• 模板中不需要额外加this.前缀，Angular会自动关联组件上下文属性

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