更新，我检查和使用空格是好的。
所以这个

<div [ngClass]="{'btn btn-primary': booleanVar, 'btn btn-danger': !booleanVar}></div>

应该行得通。
您也可以使用此格式;
[ngClass]="booleanVar ? 'btn-primary': 'btn-danger'"

你一个班一个班地做：

[ngClass]="{'btn': true, 'btn-primary': booleanVar, 'btn-danger': !booleanVar}"

今天我在一个Angular 7项目上遇到了这个问题，经过一些修补，我发现了问题所在。通常可以使用ngClass添加多个空间分隔的类，但是如果同一个类出现在多个条件下，并且前面的条件之一为假，则会将其删除。

<span [ngClass]="{
    'fas fa-book': val === 1, 
    'fas fa-eye': val === 2, 
    'far fa-star': val === 3 }">
</span>

当val === 3时没有问题，当val === 1时，fas类将被删除，而当val === 2时，fas类将被删除，然后再次添加回来，因此它工作正常。
我怀疑的是，它们只是按顺序执行，如果条件为真，则添加元素的类，但如果条件为假，则无论如何都将删除它们，我没有亲眼见过Angular 7代码，但我所有的测试都指向这一点。
假设val === 1，那么第一个Angular 将添加类fas和fa-book，但是随后（因为val === 2是false）将从span中移除类fas和fa-eye。
如果使用val === 2，则首先会计算val === 1的情况，并且会删除类fas和fa-book，但随后会计算val === 2的情况，并重新添加fas类，因此它将正常工作
无论如何，在这一点上，当你在多个条件下拥有相同的类时，我发现的唯一解决方案是重新组织你的代码，以便在不同的条件下拥有共享的类，如下所示：

<span [ngClass]="{
    'fas': val === 1 || val === 2, //val !== 3 would've been fine too in this specific case
    'fa-book': val === 1, 
    'fa-eye': val === 2, 
    'far fa-star': val === 3 }">
</span>

下面的Plunkr展示了这个问题：https://plnkr.co/edit/EouOaIfBkIR5Q29n?open=lib%2Fapp.ts&deferRun=1（在app.ts内更改“瓦尔”值。1不适用于第一个跨度，而2和3适用于两种情况）