Angular ngClass 具有两个动态 属性 绑定 类？

Question

我想在组件控制器中制作颜色和边框颜色设置为自变量的按钮。 documentation and these answers 展示了如何执行多个静态 classes 而不是多个动态 classes。我尝试了几种方法，但这些都不起作用：

[ngClass]="[color] [border]" // doesn't work

[ngClass]="[color], [border]" // doesn't work

[ngClass]="[color, border]" // not dynamic binding

[ngClass]="{[iClass]: true, [iBorder]: true,}" // doesn't work

也许我应该在视图中使用一个动态 class 并将 CSS 属性快速旋转到组件控制器中的 class？

Answer 1

试试这个：

<div [ngClass]="{'class1': expression1, 'class2': expression2}"></div>

Answer 2

通常我将逻辑放在控制器中，但是 ngClass 逻辑应该放在视图中。这消除了动态 类.

的需要

[ngClass]="{ 
   green: l2Language === 'English', 
   gray: l2Language === 'Spanish',
   red: l2Language === 'Chinese',
   finnishBlue: l2Language === 'Finnish',
   blackBorder: l1Language === 'English' || 'Spanish',
   width180: l1Language === 'English' || 'Spanish'
}"

这将多个 类（颜色、边框、宽度）放在一个按钮上，由多个变量（语言）控制。当语言为 English 时，按钮为绿色，带有黑色边框，宽度为 180 像素。当语言为 Chinese 时，按钮为红色，没有边框，也没有设置宽度。