Angular 8 ngClass If - TypeScript

在Angular 8中，我们通常会使用ngClass指令来添加或删除一个或多个类。但是，在某些情况下，我们需要基于条件添加或删除类。这时候，我们可以使用ngClass If语法。

使用方法

在HTML模板中，我们可以使用以下语法来添加或删除类：

<div [ngClass]="{
    'class-name-1': condition-1,
    'class-name-2': condition-2,
    ...
}">
    ...
</div>

我们只需要将以上语法中的condition-1，condition-2等改为我们自己的判断条件即可。

在TypeScript代码中，我们需要声明一个布尔类型的变量，并根据需要设置它的值。例如：

isError: boolean = true;

这样，我们就可以在HTML模板中使用isError变量来添加或删除类了。

示例代码

以下是一个使用ngClass If的示例代码：

<div [ngClass]="{
    'error': isError,
    'active': isActive,
    'disabled': isDisabled
}">
    This is a div element.
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent {
  isError: boolean = true;
  isActive: boolean = false;
  isDisabled: boolean = true;
}

在此示例中，我们声明了三个布尔类型的变量：isError，isActive和isDisabled。并且，我们在HTML模板中使用了这三个变量来添加或删除类。如果isError的值为true，则会自动添加名为“error”的类；如果isActive的值为true，则会自动添加名为“active”的类；如果isDisabled的值为true，则会自动添加名为“disabled”的类。如果变量的值为false，则相应的类将被删除。