Ngif 其他与 css [角]

Question

有没有办法定义当我的条件不成立时，我的组件在 Angular 中获得其他属性 styles？ 我想定义我的主要 css 文件。

我想要这样的东西：

example (s-help.component.html):不正确）

<div *ngIf="visible; else class="test" " >
   <div class="s-help-content "><span [translate]="text"></span></div>
</div>

css

.s-help{
    background-repeat: no-repeat;
    background-position: center left calc(0.37em + 0.37rem);
    background-size: calc(1em + 1rem) calc(1em + 1rem);
    border: 2px solid $warning !important;
    border-radius: 4px;
    display: block !important;   
    color: $gray-700;
    min-width: 220px;
    white-space: normal !important;
    padding-left: 5px !important;
    padding-right: 5px !important;

}
.s-help-content {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 45px;
    padding-right: 6px;
}

.test {
    display: none;
}

component used in code

<s-help [visible]="true" [ngClass]="'s-help'" [text]="'INFOTEXT.101' | translate"></s-help>

我的问题是组件的边框始终可见，即使条件为假

为了更清楚： https://stackblitz.com/edit/angular-ivy-etrn9z?file=src%2Fapp%2Fcomp%2Fcomp.component.html我不想要第一个信息文本下的边框

Answer 1

这是你需要的吗？ ngClass将 javascript 表达式作为输入，在这里您可以有条件地添加 class 或根据需要删除！

<div *ngIf="visible" [ngClass]="!visible ? 'test' : ''" >
   <div class="s-help-content "><span [translate]="text"></span></div>
</div>

更新堆栈闪电战