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 > 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;
}
在使用方括号 []
绑定到属性时,不应使用双大括号 {{ }}
。因此,它会像:
<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>
我想添加一个 class 基于组件打字稿文件中对象中的项目。我似乎无法获得正确的格式以使其正常工作。
当'selectedColourPalette'值大于零时,我想将'colourPaletteOne'中的原色添加到HTML中。
CSS
colourPaletteOne = {
primary: 'blue',
secondary: 'grey',
}
HTML
<div> [ngClass]="{'border-{{colourPaletteOne.primary}}' : selectedColourPalette > 0}"></div>
试试这个:
条件是如果 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;
}
在使用方括号 []
绑定到属性时,不应使用双大括号 {{ }}
。因此,它会像:
<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>