Angular 2中的ngClass中的动态类名答案

【问题标题】：Dynamic classname inside ngClass in angular 2Angular 2中的ngClass中的动态类名
【发布时间】：2016-09-02 14:51:21
【问题描述】：

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

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

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

这个适用于插值，但动态添加的类失败，因为整个字符串被添加为一个类：

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

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

【问题讨论】：

标签： angular

【解决方案1】：

这很好用！

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

例子：

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

【讨论】：

【解决方案2】：

试试

<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 一样。~~

Angular 9 更新

新的编译器 Ivy 为同一元素上存在不同类型的类绑定时所发生的情况带来了更多的清晰度和可预测性。 Read More about it here.

ngClass 接受三种类型的输入

Object:每个key对应一个CSS类名，不能有动态key，因为key'key'"key"都是一样的，[key]不支持AFAIK。
数组：只能包含类的列表，没有条件，尽管三元运算符有效
字符串/表达式：和普通的类属性一样

【讨论】：

如何在 .scss 文件中动态编写 css 类。例如：我写了一个“覆盖”类。此类在 div 中使用，该 div 在循环内获得认证。将有多个 div 使用此覆盖类。我想将循环索引附加到此类，例如 overlay-1、overlay-2 等。可以吗？

【解决方案3】：

更优雅的解决方案是使用&&（使用NgFor 及其first，您可以免费使用您自己的匹配项）：

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

会变成：

class="day day--monday"

【讨论】：

【解决方案4】：

基本上是其他答案的重复 - 但我没有完全理解。也许有人现在通过这个例子终于明白了。

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

将导致例如在

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

【讨论】：

【解决方案5】：

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

【讨论】：

虽然此代码 sn-p 可能是解决方案，但 including an explanation 确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

【解决方案6】：

  <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>

【讨论】：

【解决方案7】：

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

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

这里的类没有正确绑定，因为要满足一个条件，而您有两个相同的类“badge-warning”可能有两个不同的条件。解决这个问题

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

【讨论】：

【解决方案8】：

这是我为 多个类 做的事情的一个例子，其中有 多个条件：

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

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

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

【讨论】：

【解决方案9】：

这个应该可以的

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

但是 Angular 抛出了这种语法。我认为这是一个错误。另见https://stackoverflow.com/a/36024066/217408

其他无效。您不能将[] 与{{}} 一起使用。一个或另一个。 {{}} 绑定了字符串化的结果，在这种情况下不会导致所需的结果，因为需要将对象传递给 ngClass。

Plunker example

作为@A_Sing 或

显示的语法的解决方法

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

可以使用。

【讨论】：