Изменение цвета фона ion-navbar с помощью * ngIf

Question

Использование ion-navbar и базы данных Firebase.

Я хотел бы видеть, что в соответствии с дочерним элементом "color" в базе данных Firebase, будет показан другой цвет фона ion-navbar.

В настоящее время я использую * ngIf для решения моей проблемы, но не могу заставить его работать.Он продолжает показывать мне синий фон (# 85dec8, последний оператор * ngIf) независимо от цвета this.selectedItem.color.

Мой код:

   <ion-navbar class="bar">
    <ion-title class="bar">{{selectedItem.name}}</ion-title>
    <style *ngIf="selectedItem.color=='#ffce4e'">
      .bar {
        background-color: #ffce4e;
      }
    </style>
    <style *ngIf="selectedItem.color=='#f55f7c'">
        .bar {
          background-color: #f55f7c;
        }
    </style>
    <style *ngIf="selectedItem.color=='#85dec8'">
        .bar {
          background-color: #85dec8;
        }
    </style>
  </ion-navbar>
  

Любая помощь будет оценена!

Answer 1

EDIT Вы должны использовать ngClass здесь.

  <style>
  .bar1 {
    background-color: #ffce4e;
  }
  .bar2 {
      background-color: #f55f7c;
  }
  .bar3 {
      background-color: #85dec8;
  }
 </style>
 <ion-navbar [ngClass]="{'bar1' : selectedItem.color=='#ffce4e', 'bar2' : 
 selectedItem.color=='#f55f7c', 'bar3' : selectedItem.color=='#85dec8'}">
 <ion-title class="bar">{{selectedItem.name}}</ion-title>
 </ion-navbar>`

Answer 2

Использование [style.background-color]

   <ion-navbar class="bar">
         <ion-title class="bar" [style.background-color]="selectedItem.color">{{selectedItem.name}}</ion-title>
  </ion-navbar>

Смотрите пример здесь: https://stackblitz.com/edit/ionic-z2pb8w?file=pages%2Fhome%2Fhome.html

Или вы можете использовать [ngClass], тогда вам придется использовать css

   <ion-navbar class="bar">
         <ion-title class="bar" [ngClass]="{'bar': selectedItem.color=='#ffce4e', 'barA': selectedItem.color=='#f55f7c', 'barB':selectedItem.color=='#85dec8'}">{{selectedItem.name}}</ion-title>
  </ion-navbar>

In css:

  .bar {
    background-color: #ffce4e;
  }
.barA {
  background-color: #f55f7c;
}

.barB {
  background-color: #85dec8;
}

Вот пример: https://stackblitz.com/edit/ionic-3kgulw?file=pages%2Fhome%2Fhome.html