Angular中Bootstrap手风琴非首项顶部边框及动态颜色异常求助

先修复基础边框显示问题 #

Bootstrap默认会给非首个.accordion-item设置border-top:0，要让所有项都显示顶部边框，别用border-top简写（容易和动态颜色冲突），改成单独控制边框的宽度和样式：

.accordion-item {
  border-width: 4px !important;
}
/* 覆盖Bootstrap默认的顶部边框隐藏样式 */
.accordion-item:not(:first-of-type) {
  border-top-width: 4px !important;
  border-top-style: solid !important;
}

或者更简洁的写法，直接继承.accordion-item的边框设置：

.accordion-item {
  border-width: 4px !important;
}
.accordion-item:not(:first-of-type) {
  border-top: inherit !important;
}

解决动态颜色不生效问题 #

你之前的问题出在CSS里的border-top:4px solid !important——这个简写会把边框颜色默认设为黑色，而且!important优先级极高，导致[ngStyle]里的border-top-color根本覆盖不了。

调整[ngStyle]的写法，只需要设置border-color，所有边框（包括顶部）会自动继承这个颜色：

<div
  *ngFor="let finding of findings"
  class="accordion-item"
  [ngStyle]="{ 'border-color': finding.level.color }"
>
  <!-- 手风琴内容 -->
</div>

原理说明 #

• Bootstrap默认给非首个手风琴项移除顶部边框，我们要做的是恢复边框的宽度和样式，但不指定颜色，让Angular的动态样式来控制颜色。
• 用inherit可以直接继承.accordion-item本身的边框设置，避免重复写样式，同时保证颜色能被动态绑定的值覆盖。

内容的提问来源于stack exchange，提问作者cisci