时间戳

首页 > 解决方案 > 带背景色

cordova - 带背景色

问题描述

我正在寻找一种使用 *ngFor 生成列表的方法，其中每个生成的列表将具有 3 种可能的背景颜色中的 1 种。我的 .ts 文件中有以下内容：

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'}
];

我的 .html 文件中有这个：

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

我在 variables.svss 文件中添加了 $colors 。该文件现在如下所示：

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  pending:    #FFFF99,
  complete:   #9966ff,
  overdue:    #ff0000
);

所以，我的目标是让 ion-item 使用它的 this.status 来确定正确的背景颜色。当我运行我的应用程序时，这是生成的 html：

<ion-item class="item item-block item-ios" ng-style="{'background-color': item.status}">

显然，我不打算将“item.status”作为背景颜色，我希望使用#FFFF99。

非常感谢任何建议或意见。

标签： cordovaionic-framework

解决方案

为什么不为可能的状态添加一些 (S)CSS 类，如下所示：

.pending {
     background-color: #FFFF99;
}
.complete {
     background-color: #9966ff;
}
.overdue {
     background-color: #ff0000;
}

然后根据状态动态设置项目的类，如下所示：

<ion-item *ngFor="let item of items" [class]="item.status">{{item.title}}</ion-item>

推荐阅读