Angular 6 - 如何在使用变量时格式化 [ngClass]

Angular 6 - How to format [ngClass] when using a variable

我想添加一个 class 基于组件打字稿文件中对象中的项目。我似乎无法获得正确的格式以使其正常工作。

当'selectedColourPalette'值大于零时,我想将'colourPaletteOne'中的原色添加到HTML中。

CSS

colourPaletteOne = {
    primary: 'blue', 
    secondary: 'grey',    
  }

HTML

<div> [ngClass]="{'border-{{colourPaletteOne.primary}}' : selectedColourPalette > 0}"></div>

试试这个:

条件是如果 selectedColourPalette > 0border-blue 显示否则 border-grey 将显示

HTML

<div [ngClass]="selectedColourPalette > 0? 'border-' + colourPaletteOne.primary:'border-' + colourPaletteOne.secondary">sadvsdv</div>

TS

  selectedColourPalette = 1;
      colourPaletteOne = {
        primary: 'blue', 
        secondary: 'grey',    
      }

CSS

.border-blue {
    background-color: blue; 
  }
.border-blue {
    background-color: grey;
  }

在使用方括号 [] 绑定到属性时,不应使用双大括号 {{ }}。因此,它会像:

<div [ngClass]="selectedColourPalette > 0 ? 'border-' + colourPaletteOne.primary : ''"></div>

编辑说明:更改了 ngClass 结构,修正了拼写错误

更新

如果你想改进条件检查逻辑,那么你可能想在组件中添加一个方法并将参数传递给它,return想要的CSSclassas细绳。喜欢:

在模板中

<div [ngClass]="getCssClassByPalette(selectedColourPalette, colourPaletteOne)"></div>

在组件中

getCssClassByPalette = (scp, cp) => {

    let cssClass = '';

    swicth(scp){
      case 1: {
         cssClass = cp.primary;
         /* do stuff */
         break; // or return the css class
      }
      /* other cases */
    }

    return cssClass;
}

由于您只想添加一个预定义的 class,另一种选择是:

<div [class.border-blue]="selectedColourPalette > 0"></div>