关于ng class：Angular 6-使用变量时如何格式化[ngClass]


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

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

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

CSS

1
2
3
4
colourPaletteOne = {
    primary: 'blue',
    secondary: 'grey',    
  }

HTML

1
 [ngClass]="{'border-{{colourPaletteOne.primary}}' : selectedColourPalette > 0}">
相关讨论

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

1
 0 ? 'border-' + colourPaletteOne.primary : ''">

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

更新

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

在模板中

1
 

在组件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
getCssClassByPalette = (scp, cp) => {

    let cssClass = '';

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

    return cssClass;
}
相关讨论

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

1
 0">

尝试一下：

条件是是否显示selectedColourPalette > 0而不是border-blue，否则显示border-grey

HTML

1
 0? 'border-' + colourPaletteOne.primary:'border-' + colourPaletteOne.secondary">sadvsdv

TS

1
2
3
4
5
  selectedColourPalette = 1;
      colourPaletteOne = {
        primary: 'blue',
        secondary: 'grey',    
      }

CSS

1
2
3
4
5
6
.border-blue {
    background-color: blue;
  }
.border-blue {
    background-color: grey;
  }

相关讨论