Angular 7 - *ngIf 在 div 上使用类答案

【问题标题】：Angular 7 - *ngIf on div to use classAngular 7 - *ngIf 在 div 上使用类
【发布时间】：2020-07-18 11:05:36
【问题描述】：

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

类在isPreviewExpanded的值内变化

我无法在同一个 div 中找到任何方法来做到这一点，例如：

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

有什么想法吗？

【问题讨论】：

您可以使用 [ngClass] 根据您的值在 div 上设置类：[ngClass]="{'container-collapsed' : !isPreviewExpanded, 'container-expanded': isPreviewExpanded}"
angularjswiki.com/angular/…

标签： html angular if-statement angular7

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：