< ION-ITEM>具有背景色 [英] <ION-ITEM> with background color

问题描述

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

I am looking for a way to generate a list with *ngFor where each generated would have 1 of 3 possible background colors. I have the following in my .ts file:

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文件中有此文件:

and I have this in my .html file:

<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>

，然后在我的variable.svss文件中将其添加到$ colors中.文件现在看起来像这样:

and I added to the $colors in my variables.svss file. The file now looks like this:

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

所以，我的目标是使离子项目使用其this.status确定适当的背景色.当我运行我的应用程序时，这是生成的html:

So, my goal is to have the ion-item use its this.status to determine the proper background color. When I run my application, this is the html that is generated:

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

很显然，我不打算将'item.status'用作背景色，我希望使用#FFFF99.

Obviously, I did not intend for 'item.status' to be the background color, I was hoping for #FFFF99.

任何建议或建议，我们将不胜感激.

Any suggestions or advice is greatly appreciated.

推荐答案

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

Why don't you add some (S)CSS classes for your possible states like so:

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

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

And then dynamically set the class of your items according to their state, something like this:

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

这篇关于< ION-ITEM>具有背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！