使用 *ngIf 更改 ion-navbar 的背景颜色

Question

使用 ion-navbar 和 Firebase 数据库。

我希望看到的是，根据 Firebase DB 中的“颜色”子项，将显示不同的 ion-navbar 背景颜色。

我目前正在使用 *ngIf 来解决我的问题，但我无法让它发挥作用。无论 this.selectedItem.color 的颜色如何，它都会一直显示蓝色背景（#85dec8，最后一个 *ngIf 语句）。

我的代码：

   <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

使用[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>

在css中：

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

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

这是一个例子： https://stackblitz.com/edit/ionic-3kgulw?file=pages%2Fhome%2Fhome.html

Answer 2

编辑 你应该在这里使用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>`