Angular 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像这样使用动态类名？

尝试

<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可以使在同一元素上存在不同类型的类绑定时所发生的事情更具清晰度和可预测性。在这里阅读更多有关它的信息。

ngClass接受三种类型的输入

• 对象：每个键都对应一个CSS类名，您不能拥有动态键，因为key 'key' "key"它们都是相同的，并且[key]不支持AFAIK。
• 数组：虽然三元运算符有效，但只能包含类列表，没有条件
• 字符串/表达式：就像普通的类属性

这应该工作

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

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

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

柱塞示例

解决方法@A_Sing或

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

可以使用。

这是我针对具有多个条件的多个类正在执行的操作的示例：

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