如何将[ngClass]用于多个类条件Angular4答案

【问题标题】：how to use [ngClass] for multiple class conditions Angular4如何将[ngClass]用于多个类条件Angular4
【发布时间】：2019-06-13 15:23:56
【问题描述】：

目前我的 div 看起来像这样：

<div class="class-a" [ngClass]="{'class-b': !person.something}">

现在我想有另一个条件...

所以现在我希望这个 div 属于 class-a If something class-b If something else class-c

我应该怎么做？

我使用角度 4。

谢谢！

【问题讨论】：

标签： html angular

【解决方案1】：

将其像属性一样添加到对象字面量中：

[ngClass]="{'class-b': !person.something, 'other-condition': isOther }"

【讨论】：

@MNY 看到新答案

【解决方案2】：

如果您认为需要更复杂的逻辑，或者知道只有一个，则另一种选择是从组件中返回一个字符串。这可能更具可测试性。

您返回的任何字符串都将呈现为一个类

[ngClass]="renderClass()"

renderClass() {
  switch(this.user.theme){
    case "dark":
       return "dark-theme"
    case "light":
       return "light-theme"
  }
}

【讨论】：

函数“renderClass”将被多次调用，因为每次更改检测运行时都会调用它（在其中放置一个console.log，看看它被调用了多少！）。因此，最好使用管道而不是本文中解释的函数：stackoverflow.com/a/50227306/3149048

【解决方案3】：

使用此语法ngStyle 的更好方法因为，这是未完成的答案。

如果您想切换某些类，例如 text-info 或 text-danger 为 <i> 标签（

some exp ? 'text-info' : 'text-danger'

)。

最好的答案是数组而不是对象。

[ngClass] = "[some exp ? 'text-info' : 'text-danger', ...]"

祝你好运

【讨论】：

这个对我有用，其中一个不一定使用表达式，我想输出实际值[ngClass]="[dropdownOpen ? 'open': '', selectedDosing.type]"