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>

更新堆棧閃電戰