Angular 7-* ng如果在div上使用类

Question

我的角度项目中有以下div：

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

我有两个选择：isPreviewExpanded可以为真或为假

如果是正确的，我现在想立即显示它，但是如果它是错误的，我需要这样显示：

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

类在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完成。有多种方法可以做到这一点。一些想法：

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">