角度为2的 ngClass 中的动态类名

我需要在 ngClass表达式中插入一个值，但是我不能让它工作。

我尝试了这些解决方案，这是唯一对我有意义的，这两个插值失败:

<button [ngClass]="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>
<button [ngClass]="{namespace + '-mybutton': type === 'mybutton'}"></button>

这个函数使用插值，但是在动态添加类时失败了，因为整个字符串被添加为一个类:

<button ngClass="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>

所以我的问题是如何在 ngClass中像这样使用动态类名？

213285 次浏览
小开

这个应该可以

<button [ngClass]="{[namespace + '-mybutton']: type === 'mybutton'}"></button>

但是 Angular 在这个语法上有问题，我认为这是一个错误。 另见 https://stackoverflow.com/a/36024066/217408

其他人都是无效的。你不能把 []和 \{\{}}一起使用。不是这样就是那样。\{\{}}绑定字符串化的结果，在这种情况下不会导致所需的结果，因为需要将一个对象传递给 ngClass。

笨蛋的例子

解决@A _ Sing 或

<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button>

可以使用。

小开
最佳答案

试试看

<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button>

取而代之。

或者

<button [ngClass]="[type === 'mybutton' ? namespace + '-mybutton' : '']"></button>

甚至

<button class="\{\{type === 'mybutton' ? namespace + '-mybutton' : ''}}"></button>

将工作，但使用 NgClass的额外好处是，它是由任何其他方法(例如: [class.xyz]指令或 class属性等)增加了 不会覆盖其他类作为 class。

角度9更新

新的编译器 Ivy 为同一个元素上有不同类型的类绑定时所发生的情况带来了更清晰和可预测性。点击这里了解更多信息。

NgClass 接受三种类型的输入

  • 对象: 每个键对应一个 CSS 类名，不能有动态键，因为 key 'key' "key"都是相同的，而且 [key]不支持 AFAIK。
  • 数组: 只能包含类列表，没有条件，尽管三元运算符可以工作
  • 字符串/表达式: 就像普通的 class 属性一样
小开

下面是我为 多个类别和 多种情况所做的一个例子:

[ngClass]="[variableInComponent || !anotherVariableInComponent ? classes.icon.large : classes.icon.small, editing ? classes.icon.editing : '']"

地点:
classes是一个包含各种类名字符串的对象。 例如 class.icon.large = "app__icon--large"

它是动态的! 随着条件的更新而更新。

小开

我想提一些在实现类绑定时要牢记的重要观点。

    [ngClass] = "{
'badge-secondary': somevariable  === value1,
'badge-danger': somevariable  === value1,
'badge-warning': somevariable  === value1,
'badge-warning': somevariable  === value1,
'badge-success': somevariable  === value1 }"

这里的类没有正确绑定，因为要满足一个条件，而您有两个相同的类“徽章警告”，它们可能有两个不同的条件。 来纠正这个错误

 [ngClass] = "{
'badge-secondary': somevariable === value1,
'badge-danger': somevariable  === value1,
'badge-warning': somevariable  === value1 || somevariable  === value1,
'badge-success': somevariable  === value1 }"
小开 
  <div *ngFor="let celeb of singers">
<p [ngClass]="{
'text-success':celeb.country === 'USA',
'text-secondary':celeb.country === 'Canada',
'text-danger':celeb.country === 'Puorto Rico',
'text-info':celeb.country === 'India'
}">\{\{ celeb.artist }} (\{\{ celeb.country }})
</p>
</div>
小开

你可以使用 <i [className]="'fa fa-' + data?.icon"> </i>

小开

基本上是其他答案的重复-但我没有得到它完全。 也许现在有人会通过这个例子最终理解它。

[ngClass]="['svg-icon', 'recolor-' + recolor, size ? 'size-' + size : '']"

会导致

class="svg-icon recolor-red size-m"
小开

更优雅的解决方案是使用 &&(使用 NgFor和它的 first，免费使用您自己的匹配 tho) :

    <div
*ngFor="let day of days;
let first = first;"
class="day"
[ngClass]="first && ('day--' + day)"
</div>

结果会是:

class="day day--monday"
小开

这个非常好用！

<div [class.any-class]="condition"></div>

例如:

<div [class.hide]="user.isPaid()"></div>
小开

最简单的方法可能是在组件.ts 中定义一个 getter。最重要的是，它是 角度编码风格的推荐之一

// in your component.ts
get buttonClasses() {
return { [`${this.namespace}-mybutton`]: this.type === 'mybutton' }
}

<!-- in your component.html -->
<button [ngClass]="buttonClasses"></button>

提交答案