Angular:带*ngClass的条件类

Angular版本2+提供了几种有条件添加类的方法:

第一类

    [class.my_class] = "step === 'step1'"

第二类

    [ngClass]="{'my_class': step === 'step1'}"

和多个选项:

    [ngClass]="{'my_class': step === 'step1', 'my_class2' : step === 'step2' }"

第三类

    [ngClass]="{1 : 'my_class1', 2 : 'my_class2', 3 : 'my_class4'}[step]"

第四类

    [ngClass]="step == 'step1' ? 'my_class1' : 'my_class2'"

您可以在 documentation page

[ngClass]=... 而不是 *ngClass .

* 仅用于结构指令的速记语法,例如

<div *ngFor="let item of items">{{item}}</div>

而不是更长的等效版本

<template ngFor let-item [ngForOf]="items">
  <div>{{item}}</div>
</template>

另请参见 https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

<some-element [ngClass]="'first second'">...</some-element>
<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

另请参见 https://angular.io/docs/ts/latest/guide/template-syntax.html

<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>

<!-- binding to `class.special` trumps the class attribute -->
<div class="special"
     [class.special]="!isSpecial">This one is not so special</div>

<!-- reset/override all class names with a binding  -->
<div class="bad curly special"
     [class]="badCurly">Bad curly</div>

另一种解决方案是使用 [class.active] .

例子:

<ol class="breadcrumb">
    <li [class.active]="step=='step1'" (click)="step='step1'">Step1</li>
</ol>

这是正常的结构 ngClass 是:

[ngClass]="{'classname' : condition}"

所以在你的情况下,就这样使用它。。。

<ol class="breadcrumb">
  <li [ngClass]="{'active': step==='step1'}" (click)="step='step1'">Step1</li>
  <li [ngClass]="{'active': step==='step2'}" (click)="step='step2'">Step2</li>
  <li [ngClass]="{'active': step==='step3'}" (click)="step='step3'">Step3</li>
</ol>

通过以下示例,您可以使用“IF ELSE”

<p class="{{condition ? 'checkedClass' : 'uncheckedClass'}}">
<p [ngClass]="condition ? 'checkedClass' : 'uncheckedClass'">
<p [ngClass]="[condition ? 'checkedClass' : 'uncheckedClass']">

您可以使用ngClass有条件地应用类名,而不使用Angular

例如

[ngClass]="'someClass'">

有条件的

[ngClass]="{'someClass': property1.isValid}">

多个条件

 [ngClass]="{'someClass': property1.isValid && property2.isValid}">

方法表达式

[ngClass]="getSomeClass()"

此方法将在组件内部

 getSomeClass(){
        const isValid=this.property1 && this.property2;
        return {someClass1:isValid , someClass2:isValid};
    }

Angular提供了多种有条件添加类的方法:

第一种方式

active是你的类名

[class.active]="step === 'step1'"

第二种方式

active是你的类名

[ngClass]="{'active': step=='step1'}"

第三种方式

使用三元运算符class1,class2是类名

[ngClass]="(step=='step1')?'class1':'class2'"

你应该用点东西( [ngClass] 而不是 *ngClass )就像这样:

<ol class="breadcrumb">
  <li [ngClass]="{active: step==='step1'}" (click)="step='step1; '">Step1</li>
  (...)

在里面 Angular 7.X

根据表达式求值的类型,CSS类更新如下:

• string-添加字符串中列出的CSS类(以空格分隔)

• Array-添加声明为Array元素的CSS类

• 对象键是CSS类,当值中给定的表达式求值为true值时添加,否则它们将被删除。

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

此外,您可以使用方法函数添加:

在HTML中

<div [ngClass]="setClasses()">...</div>

在组件中.ts

// Set Dynamic Classes
  setClasses() {
    let classes = {
      constantClass: true,
      'conditional-class': this.item.id === 1
    }

    return classes;
  }

扩展MostafaMashayekhi对选项二的回答> 您还可以用“,”链接多个选项

[ngClass]="{'my-class': step=='step1', 'my-class2':step=='step2' }"

此外,*ngIf可以用于某些情况,通常与*ngFor结合使用

class="mats p" *ngIf="mat=='painted'"

您可以使用[ngClass]或[class.classname],两者的工作原理相同。
[class.my-class]="step==='step1'"

或

[ngClass]="{'my-class': step=='step1'}"

两者都会起作用!

当我创建一个反应式表单时,我必须在按钮上分配两种类型的类。我就是这样做的:

<button type="submit" class="btn" [ngClass]="(formGroup.valid)?'btn-info':''" 
[disabled]="!formGroup.valid">Sign in</button>

当表单有效时,按钮具有btn和btn类(来自引导程序),否则只有btn类。

我们可以使用以下语法使类动态化。在Angular 2 plus中,您可以通过多种方式实现这一点:

[ngClass]="{'active': arrayData.length && arrayData[0]?.booleanProperty}"

[ngClass]="{'active': step}"

[ngClass]="step== 'step1'?'active':''"

[ngClass]="step? 'active' : ''"

假设,YourCondition是您的条件或布尔属性,然后这样做

[class.yourClass]="YourCondition"

该指令以三种不同的方式运行,具体取决于表达式计算的三种类型:

1. 如果表达式的计算结果为字符串,则该字符串应为一个或多个以空格分隔的类名。
2. 如果表达式的计算结果是一个对象,那么对于具有真实值的对象的每个键值对,相应的键值将用作类名。
3. 如果表达式的计算结果为数组,则数组的每个元素都应该是类型1中的字符串或类型2中的对象。这意味着您可以在数组中混合字符串和对象,以便更好地控制CSS类的显示。有关此示例,请参见下面的代码。

    [class.class_one] = "step === 'step1'"

    [ngClass]="{'class_one': step === 'step1'}"

对于多个选项:

    [ngClass]="{'class_one': step === 'step1', 'class_two' : step === 'step2' }" 

    [ngClass]="{1 : 'class_one', 2 : 'class_two', 3 : 'class_three'}[step]"

    [ngClass]="step == 'step1' ? 'class_one' : 'class_two'"

ngClass 语法:

[ngClass]="{'classname' : conditionFlag}"

您可以这样使用:

<ol class="breadcrumb">
  <li [ngClass]="{'active': step==='step1'}" (click)="step='step1'">Step1</li>
  <li [ngClass]="{'active': step==='step2'}" (click)="step='step2'">Step2</li>
  <li [ngClass]="{'active': step==='step3'}" (click)="step='step3'">Step3</li>
</ol>

这就是我的工作:

[ngClass]="{'active': dashboardComponent.selected_menu == 'profile'}"

与 [ngClass] 指令,但我也得到了相同的错误

无法读取处未定义的属性“remove”。。。

我认为是我的错误 [ng类] 但事实证明,我试图在 [ng类] 未初始化。

就像我的打字文件里有这个

element: {type: string};

在我的 [ng类] 我在用

[ngClass]="{'active', element.type === 'active'}"

我得到了错误

无法读取在处未定义的属性“type”。。。

解决办法是把我的财产

element: {type: string} = {type: 'active'};

希望它能帮助那些试图匹配房产状况的人 [ng类]

对于 elseif 语句(较少比较)的用法如下:(例如,比较三个语句)

<div [ngClass]="step === 'step1' ? 'class1' : (step === 'step2' ? 'class2' : 'class3')"> {{step}} </div>

<div class="collapse in " [ngClass]="(active_tab=='assignservice' || active_tab=='manage')?'show':''" id="collapseExampleOrganization" aria-expanded="true" style="">
 <ul> 	 <li class="nav-item" [ngClass]="{'active': active_tab=='manage'}">
<a routerLink="/main/organization/manage" (click)="activemenu('manage')"> <i class="la la-building-o"></i>
<p>Manage</p></a></li> 
<li class="nav-item" [ngClass]="{'active': active_tab=='assignservice'}"><a routerLink="/main/organization/assignservice" (click)="activemenu('assignservice')"><i class="la la-user"></i><p>Add organization</p></a></li>
</ul></div>

代码是ngClass if-else条件的良好示例。

[ngClass]="(active_tab=='assignservice' || active_tab=='manage')?'show':''"

[ngClass]="{'active': active_tab=='assignservice'}"

试着这样。。

用“”定义类

<ol class="breadcrumb">
    <li *ngClass="{'active': step==='step1'}" (click)="step='step1; '">Step1</li>
    <li *ngClass="{'active': step==='step2'}"  (click)="step='step2'">Step2</li>
    <li *ngClass="{'active': step==='step3'}" (click)="step='step3'">Step3</li>
</ol>

如果用户希望基于&&和|| 那么下面一个是我的工作

[ngClass]="{'clasname_1':  condition_1 && condition_2, 'classname_2':  condition_1 && condition2, 'classname_3': condition}"

例子:

[ngClass]="{'approval-panel-mat-drawer-side-left':  similar_toil_mode==='side' && showsTheSimilarToilsWithCloseIcon, 'approval-panel-mat-drawer-side-right':  similar_toil_mode==='side' && !showsTheSimilarToilsWithCloseIcon, 'approval-panel-mat-drawer-over': similar_toil_mode==='over'}"

这个例子有点大,但触发一个类而不是内联输入是我首选的方法。 这样,您可以向元素添加任意多的可能性。 对于那些希望将多个[ngClass]绑定到单个元素的人来说,可能有一种方法。

<span class="inline-flex items-center font-medium" [ngClass]="addClass">{{ badge.text }}</span>

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';

type Badge = {
    size?: 'basic' | 'large';
    shape?: 'basic' | 'rounded';
    color?: 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';
    dot?: boolean;
    removeButton?: false;
    text?: string;
}

@Component({
    selector: 'bio-badge',
    templateUrl: './badge.component.html',
    styleUrls: ['./badge.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BioBadgeComponent {
    @Input() badge!: Badge;
    get addClass() {
        return {
            'px-2.5 py-0.5 text-sx': this.badge.size === 'basic',
            'px-3 py-0.5 text-sm': this.badge.size === 'large',
            'rounded-full': this.badge.shape === 'basic',
            'rounded': this.badge.shape === 'rounded',
            'bg-gray-100 text-gray-800': this.badge.color === 'gray',
            'bg-red-100 text-red-800': this.badge.color === 'red',
            'bg-yellow-100 text-yellow-800': this.badge.color === 'yellow',
            'bg-green-100 text-green-800': this.badge.color === 'green',
            'bg-blue-100 text-blue-800': this.badge.color === 'blue',
            'bg-indigo-100 text-indigo-800': this.badge.color === 'indigo',
            'bg-purple-100 text-purple-800': this.badge.color === 'purple',
            'bg-pink-100 text-pink-800': this.badge.color === 'pink',
        }
    }
}