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

Question

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

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

Answer 1

您需要使用OR运算符，而不是AND，因为如果满足以下条件之一，您需要应用类：

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

Answer 2

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

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

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

控制器：

computeButtonClass ( ) {
   etc. etc.
}

get buttonClass ( ) {
 etc. etc. 
}

我有点走了一段时间，按照＆＃34;这种方式很简单，如果框架启用了它为什么不使用它，＆＃34;但是就像elvis运算符一样，你发现你在标记中放的越多，它就越难以获得。保持你的逻辑不在你的标记之外，除非有一个非常具体的理由不这样做。关注点等等。