Angular 7 - *ngIf on div 使用 class

Question

我的 angular 项目中有以下 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">

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>

Angular 7 - *ngIf on div 使用 class

Angular 7 - *ngIf on div to use class

html

if-statement

angular

angular7