с цветом фона

Question

Я ищу способ создать список с помощью * ngFor, где каждый сгенерированный будет иметь 1 из 3 возможных цветов фона.У меня есть следующее в моем файле .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>

, и я добавил к $ colors в моей переменной .svssфайл.Файл теперь выглядит следующим образом:

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

Любые предложения или советы с благодарностью.

Answer 1

Почему бы вам не добавить некоторые (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>