为什么 Angular 7 无法使用 [ngClass] 正确渲染我的 bootstrap 类

Question

[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 的 bootstrap class，但没有添加 col-3 的 class。其他一切正常。有人运行遇到过这样的问题或有任何想法吗？

Answer 1

属性的顺序很重要（显然）。最后一个 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),
}"

为什么 Angular 7 无法使用 [ngClass] 正确渲染我的 bootstrap 类

Why is Angular 7 not rendering my bootstrap classes properly with [ngClass]

ng-class

bootstrap-4

angular