Angular 7 - *ngIf 在 div 上使用 class

Question

我的 angular 項目中有以下div ：

<div *ngIf="isPreviewExpanded" class="project-daypart-group-columns-container-expanded pull-left">

我有兩個選擇： isPreviewExpanded可以是 true 或 false

如果是真的，我想現在就顯示它，但如果它是假的，我需要像這樣顯示：

<div *ngIf="!isPreviewExpanded" class="project-daypart-group-columns-container-collapsed pull-left">

class 在isPreviewExpanded的值內變化

我無法在同一個div中找到任何方法，例如：

<div *ngIf="isPreviewExpanded" class="project-daypart-group-columns-container-expanded; else class='project-daypart-group-columns-container-collapsed'>

有任何想法嗎？

Answer 1

使用ngClass指令在 HTML 元素上添加和刪除 CSS 類。

<div class="pull-left" [ngClass]="'project-daypart-group-columns-container-expanded':isPreviewExpanded, 'project-daypart-group-columns-container-collapsed': !isPreviewExpanded>

Answer 2

您可以使用NgClass來完成。 有多種方法可以做到這一點。 一些想法：

get dynamicClass(): string {
    return this.isPreviewExpanded ? 
        'project-daypart-group-columns-container-expanded' : 
        'project-daypart-group-columns-container-collapsed';
}

<div *ngIf="isPreviewExpanded class="pull-left' [ngClass]="dynamicClass">

或者

<div
*ngIf="isPreviewExpanded"
class="pull-left"
[ngClass]="{
    'project-daypart-group-columns-container-expanded': isPreviewExpanded,
    'project-daypart-group-columns-container-collapsed': !isPreviewExpanded
}"
></div>