时间戳

首页 > 解决方案 > 为什么 Angular 7 不能使用 [ngClass] 正确渲染我的引导类

angular - 为什么 Angular 7 不能使用 [ngClass] 正确渲染我的引导类

问题描述

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

标签： angularbootstrap-4ng-class

解决方案

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

推荐阅读