问题描述
[ngClass]="{
'col-12 h-100': p.length === 1,'col-6 h-50': (p.length >= 2 && p.length <= 4),'col-4 h-50': (p.length === 5 || p.length === 6),'col-3 h-50': (p.length === 7 || p.length === 8),'col-3 h-25': (p.length === 9 || p.length === 10)
}"
所以我在Angular 7 div上有此指令。 div还使用*ngFor遍历p数组。 *ngFor正常工作，条件1,2,3＆5也是如此，由于某种原因，它在条件4：'col-3 h-50': (p.length === 7 || p.length === 8)处中断。在开发工具中，将添加h-50的引导类，而没有添加col-3的类。其他一切正常。任何人遇到这样的问题或有任何想法吗？
解决方法
属性的顺序很重要（显然）。最后一个col-3语句否决了前一个语句。您必须将它们分开：）
[ngClass]="{
'col-12 h-100': p.length === 1,'col-6': (p.length >= 2 && p.length <= 4),'col-4': (p.length === 5 || p.length === 6),'col-3 h-25': (p.length >= 7),'h-50': (p.length >= 2 && p.length <= 8),}"