Ionic中如何通过*ngFor根据status为ion-item设置对应背景色？

你的问题核心在于无法直接在模板中引用SCSS变量，同时ng-style的写法也有误，导致背景色被设置成了status的字符串值而非对应的颜色代码。下面给你两种可行的解决方案：

方案一：在组件类中定义颜色映射（直接控制样式） #

因为SCSS变量是编译时处理的，无法直接在TS/HTML中访问，所以我们可以在组件的.ts文件里定义一个和SCSS变量对应的颜色映射对象，然后在模板中通过这个对象获取对应颜色：

1. 修改你的组件.ts文件，添加颜色映射：

// 定义status对应的颜色，和variables.scss里的颜色保持一致
statusColors = {
  pending: '#FFFF99',
  complete: '#9966ff',
  overdue: '#ff0000'
};

this.items = [ 
  {id:'00001', status:'pending', title: 'hi1', description: 'test1'}, 
  {id:'00002', status:'pending', title: 'hi2', description: 'test2'}, 
  {id:'00003', status:'pending', title: 'hi3', description: 'test3'} 
];

2. 修改.html文件的ngStyle绑定（注意不需要用{{}}插值，直接用表达式）：

<ion-content>
  <ion-list>
    <ion-item 
      *ngFor="let item of items" 
      (click)="viewItem(item)"
      [ngStyle]="{'background-color': statusColors[item.status]}">
      {{item.title}}
    </ion-item>
  </ion-list>
</ion-content>

方案二：使用CSS类绑定（更符合Ionic最佳实践） #

这种方式更推荐，因为它遵循了Ionic的样式规范，也更容易维护：

1. 在组件的.scss文件（或者全局的variables.scss扩展）中定义对应status的类：

// 利用variables.scss里的$colors变量
ion-item.pending {
  --background: map-get($colors, pending);
}

ion-item.complete {
  --background: map-get($colors, complete);
}

ion-item.overdue {
  --background: map-get($colors, overdue);
}

2. 修改.html文件，用[ngClass]绑定对应的类：

<ion-content>
  <ion-list>
    <ion-item 
      *ngFor="let item of items" 
      (click)="viewItem(item)"
      [ngClass]="item.status">
      {{item.title}}
    </ion-item>
  </ion-list>
</ion-content>

为什么原来的写法不生效？ #

你之前的ng-style="{'background-color': {{item.status}}}"有两个问题：

• ng-style本身支持表达式，不需要额外加{{}}插值，加了之后反而会把item.status解析成字符串字面量；
• item.status的值是'pending'这个字符串，浏览器无法识别它作为颜色值，所以只会把背景色设置成无效的pending，而非你期望的#FFFF99。

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