Ionic中如何通过[style.background-color]为ion-row设置背景色？

你可以直接在<ion-row>元素上添加[style.background-color]属性绑定，逻辑和已生效的[style.color]完全一致，两种实现方式供你选择：

方式1：单独写背景色处理函数 #

先修改模板代码，新增背景色绑定：

<ion-grid style="margin-left:2px;margin-right:2px;margin-top:5px;">
  <ion-row *ngFor="let scheduleRecordDayCompendium of scheduleRecordDayCompendiums; let i = index" 
       [style.color]="getLineColor(scheduleRecordDayCompendium)"
       [style.background-color]="getLineBackgroundColor(scheduleRecordDayCompendium)">
     <ion-col>
       <!-- 你的列内容 -->
     </ion-col>
  </ion-row>
</ion-grid>

然后在组件类里新增对应的背景色处理函数：

getLineBackgroundColor(scheduleRecordDayCompendium) {
  switch(scheduleRecordDayCompendium.day) {
    case 'SATURDAY':
      return '#e6f0ff'; // 浅蓝色背景，和蓝色文字适配
    case 'SUNDAY':
      return '#ffe6e6'; // 浅红色背景，和红色文字适配
    default:
      return '#ffffff'; // 默认白色背景
  }
}

方式2：复用现有函数（快速实现半透明背景） #

如果想快速给对应行加半透明背景，直接复用现有的getLineColor函数，给颜色值加透明度后缀即可：

<ion-row *ngFor="let scheduleRecordDayCompendium of scheduleRecordDayCompendiums; let i = index" 
     [style.color]="getLineColor(scheduleRecordDayCompendium)"
     [style.background-color]="getLineColor(scheduleRecordDayCompendium) + '20'">

这种写法会把文字颜色转换成半透明背景，比如#00f变成#00f20，也就是20%透明度的蓝色背景，简单快捷。

本质上Angular的[style.xxx]绑定只要函数返回合法的CSS颜色值（十六进制、RGB、RGBA都行）就能生效，和你之前设置文字颜色的逻辑完全一致，直接套用即可。

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