介绍

在 TypeScript 和 Angular 应用程序中，使用 ngClass 可以根据条件设置 HTML 元素的类。

ngClass 可以接受一个对象或一个字符串数组。如果传递一个对象，则该对象的键是类名，值是布尔值。如果布尔值为真，则该类将应用于元素；否则，该类将从元素中删除。

用法

对象语法

以下是使用对象语法的示例：

<div [ngClass]="{ 'active': isActive, 'disabled': isDisabled }"></div>

在上面的示例中，类名 active 和 disabled 是 object 的键。isActive 和 isDisabled 是组件的属性，用于设置条件。

数组语法

以下是使用数组语法的示例：

<div [ngClass]="['active', isActive ? 'enabled' : '']"></div>

在上面的示例中，active 类始终将应用于元素，而 enabled 类将仅在 isActive 属性为真时应用于元素。

总结

在 TypeScript 和 Angular 应用程序中，使用 ngClass 可以方便地根据条件设置 HTML 元素的类。对象语法和数组语法允许您在应用程序中灵活地设置类。