Angular2 ngClass 具有相同的类但不同的条件答案

【问题标题】：Angular2 ngClass with the same class but different conditionsAngular2 ngClass 具有相同的类但不同的条件
【发布时间】：2017-03-27 12:13:47
【问题描述】：

如何使用[ngClass] 和相同的.className 但有两个不同的条件？

我尝试像这样将它们分开 - 但由于某种原因它没有附加类。

<button class="btn" [ngClass]="{'btn-success': condition1, 'btn-success': condition2 }">My Button</button>

可能是这样的，它与上面的相同，它没有将btn-success 类附加到按钮。

<button class="btn" [ngClass]="{'btn-success': condition1 && condition2 }">My Button</button>

如果已经完成，找不到任何地方，我知道您可以在一个条件下使用两个不同的类。

【问题讨论】：

【解决方案1】：

您需要使用OR 运算符，而不是AND，因为如果这些条件之一为真，您想要应用类：

<button class="btn" [ngClass]="{'btn-success': condition1 || condition2 }">My Button</button>

【讨论】：

【解决方案2】：

或者，只使用一个函数或一个getter（这实际上是首选做法，最大限度地减少标记中的条件，这是让CL被踢回的常见原因，除了明显的反意大利面条外，还有各种原因，例如如何构建过程处理模板、缩小/丑化等）。

<button class="btn" [ngClass]="computeButtonClass ( )">My Button</button>

<button class="btn" [ngClass]="buttonClass">My Button</button>

控制器：

computeButtonClass ( ) {
   etc. etc.
}

get buttonClass ( ) {
 etc. etc. 
}

我有点走另一条路，沿着“这种方式很容易，如果框架支持它为什么不使用它”的思路，但就像 elvis 运算符一样，你会发现你投入的越多标记，它变得越笨拙。除非有非常具体的理由不这样做，否则将您的逻辑排除在标记之外。关注点分离等。

【讨论】：