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

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

2 个答案: