使用变量更改输入的背景颜色

Question

我有一个 3 级导航栏，第二级有一个颜色代码，对应于他各自的第三级

我想要实现的是，当单击一个关卡时，该关卡的背景颜色会更改为它的左边框颜色（例如“Réseau”bg 应该是全蓝色）但我无法使其正常工作因为关卡是用 NgFor* 渲染的，而颜色是来自 switch() 函数的变量。

如果有人能引导我了解我做错了什么，我将不胜感激。一直在尝试 NgStyle 和 NgClass 但还没有成功。

navbar.html

<div class="w-100 text-nowrap">
      <nav class="nav nav-tabs w-25 flex-column flex-sm-row reduceHeight40  mainNav">
        <input type="submit"
               [value]="label_name[first]"
               checked
               [style.borderColor]="getColors(first)"
               class="flex-sm-fill border-top-0 border-right-0 text-nowrap border-left-0 text-sm-center nav-link alu hovAlu"
               *ngFor="let first of firstLevel"
               (click)="dynamicFilter1(first); ">
      </nav>
        <div class="container alu  dpf  navbar-light">
           <div class="nav nav-tabs flex-column text-nowrap thirdColor flex-sm-row navbar-light" >
             <input  [value]="label_name[second]" type="submit"
                     *ngFor="let second of dynamicLevels1; let index2 = index"
                     (click)="dynamicFilter2(second);selectedItem = index2;selectedItem2 = null"
                     [style.borderLeftColor]="getColors(second)"
                     [ngClass]="{'active': selectedItem === index2}"
                  class="flex-sm-fill ml-2   reduceHeight25  wdt10 text-sm-center nav-link"
                    >
           </div>
        </div>
          <div class="container alu  dpf navbar-light"  *ngIf="ShowImage === false">
            <div class="w-100">
            <nav *ngIf="ShowTemplate"
                 class="nav nav-tabs d-flex   flex-column ml-1 level3 flex-sm-row navbar-light " >
              <input   type="button" [value]="label_name[(third)]"
                       [style.borderColor]="getColors(third)"
                       class="flex-sm-fill  text-nowrap  reduceHeight25 smallText border-top-0 border-right-0 borderless border-left-0 wdt10 text-sm-center nav-link"
                       (click)="dynamicFilter3(third);selectedItem2 = index3"
                       [ngClass]="{'active': selectedItem2 === index3}"
                       *ngFor="let third of dynamicLevels2;let index3 = index">
            </nav>
            </div>
        </div>

</div>

开关功能

  colors: any;

  getColors(color) {
    this.colors = color;
    switch (color) {
      case(1):
        return 'rgb(0, 118, 172)';
      case(2):
      case(3):
      case(4):
        return 'rgb(0, 118, 172)';
      case(5):
      case(6):
      case(7):
        return 'rgb(255,185,29)';
      case(8):
        return 'rgb(3,160,128)';
      case(9):
      case(10):
      case(11):
      case(12):
        return 'rgb(169,169,169)';
    }
  }

如果您需要更多代码，请告诉我，我会添加。

提前感谢您的帮助！

Answer 1

老实说，我会将样式属性单独留给样式表。 这有几个优点，仅举几例：

• 让您轻松地包含来自已定义样式指南的颜色，大型商业项目通常具有这些颜色
• 可以与 mixins 一起重用
• 不会遇到很多函数调用 (https://medium.com/showpad-engineering/why-you-should-never-use-function-calls-in-angular-template-expressions-e1a50f9c0496)
• 不会让您犯语法错误，因为您的 switch-case 可能会返回任何无效字符串

这里有一个例子：

scss：

$colors-map: (
  '1': rgb(0, 118, 172),
  '2': rgb(0, 118, 172),
  '3': rgb(0, 118, 172),
  '4': rgb(0, 118, 172),
  '5': rgb(255, 185, 29),
  '6': rgb(255, 185, 29),
  '7': rgb(255, 185, 29),
  '8': rgb(3, 160, 128),
  '9': rgb(169, 169, 169),
  '10': rgb(169, 169, 169),
  '11': rgb(169, 169, 169),
  '12': rgb(169, 169, 169)
);

@each $c in map-keys($colors-map) {
  .color-#{$c} {
    border-left: 5px solid map-get($colors-map, $c);

    &.selected {
      background-color: map-get($colors-map, $c);
    }
  }
}

html：

<ng-container *ngFor="let x of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]">
  <div class="color-{{x}}" [ngClass]="{selected: x === selectedX}" (click)="selectedX = x">
    I am element {{ x }}!
  </div>
</ng-container>

参见 stackblitz：

https://stackblitz.com/edit/angular-ivy-thypkb?file=src/app/app.component.ts