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

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

当表单有效时，button具有btn和btn-class (from bootstrap)，否则只有btn类。

此外，您可以添加与方法函数:

在HTML中

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

在component.ts

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

    return classes;
  }

这个例子有点大，但是触发一个类而不是输入内联是我首选的方法。 通过这种方式，您可以在元素中添加尽可能多的可能性。 对于那些想要将多个[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',
        }
    }
}

你可以使用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};
    }

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

无法读取未定义的属性“移除”

和我认为是错误在我的[ngClass]条件，但它原来是我试图访问的[ngClass]条件的属性没有初始化。

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

element: {type: string};

和在我的[ngClass]我正在使用

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

我得到了错误

无法读取未定义的属性“类型”

解决办法就是把我的财产

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

希望它能帮助那些试图匹配[ngClass]中属性条件的人

该指令有三种不同的操作方式，这取决于表达式的计算结果是三种类型中的哪一种:

If the expression evaluates to a string, the string should be one or more space-delimited class names. If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name. If the expression evaluates to an array, each element of the array should either be a string as in type 1 or an object as in type 2. This means that you can mix strings and objects together in an array to give you more control over what CSS classes appear. See the code below for an example of this.

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