[Angular] 笔记 5：ngClass

Angular 中的 ngClass 是什么？
chatgpt 回答：
在Angular中，ngClass 是一个内置的指令，用于动态地添加或移除 HTML 元素的 CSS 类。它允许你根据条件设置一个或多个 CSS 类，可以是对象、数组或字符串。

使用方式：

1. 字符串语法

<div [ngClass]="'class1 class2'">...</div>

在这个例子中，class1 和 class2 类将被添加到 div 元素中。

2. 数组语法

<div [ngClass]="['class1', 'class2']">...</div>

使用数组语法可以添加多个类到元素中。

3. 对象语法

<div [ngClass]="{'class1': condition1, 'class2': condition2}">...</div>

基于条件动态地添加或移除类。如果 condition1 为 true，class1 类将被添加到元素中；如果 condition2 为 true，class2 类将被添加到元素中。

4. 使用方法调用

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

getClassNames() 是一个在组件中定义的方法，用于返回需要应用的类名。

ngClass 是一个非常有用的指令，能够根据组件中的变量或条件动态地管理元素的样式类，让你可以根据特定的情况或状态来改变元素的外观和行为。

---

Youtube tutorial:
app.component.ts:

// 类型检查
interface Pokemon {
  id: number;
  name: string;
  type: string;
  isCool: boolean;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  pokemons: Pokemon[] = [
    {
      id: 1,
      name: 'pikachu',
      type: 'electric',
      isCool: false,
    },
    {
      id: 2,
      name: 'squirtle',
      type: 'water',
      isCool: true,
    },
    {
      id: 3,
      name: 'charmander',
      type: 'fire',
      isCool: true,
    },
  ];

  constructor() {}
}

app.component.html，但是没有使用 ngClass 设置 CSS，而是使用属性绑定语法，动态添加 cool-bool CSS 类到 td 元素中。

<table>
  <thead>
    <th>Index</th>
    <th>Name</th>
    <th>Type</th>
  </thead>
  <tbody>
    <tr *ngFor="let pokemon of pokemons; let i = index">
      <td [class.cool-bool]="pokemon.isCool">{{ i }}</td>
      <td>{{ pokemon.name }}</td>
      <td>{{ pokemon.type }}</td>
    </tr>
  </tbody>
</table>

app.component.css

.cool-bool {
	/* 蓝色 */
    background: #0094ff;
}

可以看到如下的界面：

使用 ngClass 对象语法:
app.component.html:

<table>
  <thead>
    <th>Index</th>
    <th>Name</th>
    <th>Type</th>
  </thead>
  <tbody>
    <tr *ngFor="let pokemon of pokemons; let i = index">
      <td [class.cool-bool]="pokemon.isCool">{{ i }}</td>
      <td>{{ pokemon.name }}</td>
      <td>{{ pokemon.type }}</td>
    </tr>
    <tr *ngFor="let pokemon of pokemons; let i = index">
      <td [ngClass]="{'cool-bool':pokemon.isCool}">{{ i }}</td>
      <td>{{ pokemon.name }}</td>
      <td>{{ pokemon.type }}</td>
    </tr>
  </tbody>
</table>

Web 页面：