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

Question

我想根据组件 typescript 文件中的对象中的项目添加一个类。我似乎无法获得正确的格式以使其正常工作。

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

CSS

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

HTML

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

Answer 1

使用方括号 [] 绑定(bind)到属性时，不应使用双大括号 {{ }}。因此，它会是这样的:

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

编辑注释:更改了 ngClass 结构，修复了拼写错误

更新

如果你想改进条件检查逻辑，那么你可能需要在组件中添加一个方法并将参数传递给它，以字符串形式返回所需的 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;
}