Question

我想基于组件打字稿文件中对象中的项目添加一个类。我似乎无法正确使用该格式。

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

CSS

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

HTML

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

Answer 1

在使用方括号{{ }}绑定到属性时，请勿使用双括号[]。因此，它就像：

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

编辑说明：更改了ngClass结构，修正了错字

更新

如果要改善条件检查逻辑，则可能需要在component中添加一个方法并将参数传递给它，将所需的CSS类作为字符串返回。喜欢：

在模板中

<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;
}

Answer 2

尝试一下：

条件是是否显示selectedColourPalette > 0比border-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;
  }

Answer 3

由于您只想添加一个预定义的类，因此另一种选择是：

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

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

3 个答案: