如何使用 ngClass 将多个类应用于 div？答案

【问题标题】：How do I apply a several classes to div using ngClass?如何使用 ngClass 将多个类应用于 div？
【发布时间】：2020-05-14 08:05:30
【问题描述】：

如何将多个类应用于 div？

<div class="al-timeline"
         [ngClass]="{'right': isDisplayRight, 'remove-circle': !timelineData.date, 'first-circle': isFirstItem, isLastItem ? 'arrow' ? isDisplayRight: 'arrow-left' : 'arrow-right'}">
</div>
    &.arrow {
    &::after {
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        content: '';
        position: absolute;
        left: 49%;
        bottom: -9px;
    }

    &.arrow-right {
        &::after {
            border-left: 20px solid @al-main-color-2;
        }
    }

    &.arrow-left {
        &::after {
            border-right: 20px solid @al-main-color-2;
        }
    }
}

如果isLastItem，我想应用'arrow'类，如果应用箭头类，我想在isDisplayRight添加'arrow-left'类，否则添加'arrow-right'

【问题讨论】：

标签： angular

【解决方案1】：

同时满足二等舱的条件

如果(isLastItem && isDisplayRight) 条件为真，则应用arrow-right

【讨论】：

我更新了我的问题，在这种情况下我应该重写我的样式，'arrow-right' 和 'arrow-left' 将具有相同的属性，但边框除外
我这样做了：'arrow arrow-left' : (isLastItem && isDisplayRight), 'arrow arrow-right' : (isLastItem && !isDisplayRight) 但我不太喜欢
哦，不幸的是它不起作用，它只在这种情况下起作用：'arrow arrow-left' : (isLastItem && isDisplayRight)
添加单独的箭头：'arrow: isLastItem, 'arrow-left' : (isLastItem && isDisplayRight), 'arrow-right' : (isLastItem && !isDisplayRight)