【Angular】模板语法-循环和逻辑判断

在 Angular 模板中，循环和逻辑判断是非常常见的需求，Angular 提供了几种强大的机制来实现这些功能。主要使用的特性是 结构性指令，如 *ngFor 和 *ngIf，以及 ngSwitch 指令。以下是这些特性和用法的详细介绍。

1. 循环（Looping）

1.1 *ngFor 指令

*ngFor 是 Angular 中用于循环遍历数组或列表的结构性指令。它可以根据集合中的每个元素生成一个 DOM 元素。最常见的用途是列表渲染。

基本用法：

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

• let item of items：let 声明局部变量 item，它表示数组 items 中的每个元素。
• *ngFor 会遍历 items 数组中的每一项并渲染一个 <li> 元素。

1.2 index 和 first / last 等局部变量

在 *ngFor 中，可以使用一些 Angular 提供的局部变量来获取更多的信息，像是元素的索引、是否是第一个元素、最后一个元素等。

<ul>
  <li *ngFor="let item of items; let i = index">
    {{ i + 1 }}. {{ item }}
  </li>
</ul>

• index：元素在数组中的索引（从 0 开始）。

<ul>
  <li *ngFor="let item of items; let isFirst = first; let isLast = last">
    <span *ngIf="isFirst">First item!</span>
    <span *ngIf="isLast">Last item!</span>
    {{ item }}
  </li>
</ul>

• first：指示该项是否为数组中的第一个元素。
• last：指示该项是否为数组中的最后一个元素。

1.3 trackBy 优化

在循环大量数据时，为了提高性能，可以使用 trackBy 来避免 Angular 重复渲染所有元素。trackBy 可以指定一个函数来跟踪每个元素的唯一标识符，从而确保只有发生变化的元素被更新。

<ul>
  <li *ngFor="let item of items; trackBy: trackById">{{ item.name }}</li>
</ul>
trackById(index: number, item: any): number {
  return item.id;  // 假设每个 item 有一个唯一的 id
}

trackBy 提供的 id 可以是一个唯一的标识符，Angular 会利用它来判断 DOM 中哪些项是新的，哪些是被修改过的，从而避免不必要的 DOM 更新。

2. 逻辑判断（Conditional Rendering）

2.1 *ngIf 指令

*ngIf 是 Angular 中用于条件渲染的结构性指令。它根据表达式的值来决定是否渲染某个 DOM 元素。当表达式为 true 时，DOM 元素会被渲染；如果为 false，元素则不会出现在 DOM 中。

基本用法：

<div *ngIf="isVisible">This content is visible if isVisible is true.</div>

• *ngIf="isVisible"：只有 isVisible 为 true 时，div 元素才会出现在 DOM 中。

2.2 else 语句

*ngIf 还支持 else 语句，可以在条件为 false 时显示备用的模板内容。

<div *ngIf="isVisible; else elseTemplate">Content is visible!</div>
<ng-template #elseTemplate>
  <p>Content is hidden.</p>
</ng-template>

• elseTemplate 是一个 <ng-template>，它包含了备用的内容，当 isVisible 为 false 时会显示。

2.3 *ngIf 与 else 结合 ng-template 使用

ng-template 是一个容器，它不会被直接渲染。只有当它被引用时，里面的内容才会被插入到 DOM 中。

<div *ngIf="isVisible; then thenTemplate else elseTemplate"></div>
<ng-template #thenTemplate>
  <p>Content is visible.</p>
</ng-template>
<ng-template #elseTemplate>
  <p>Content is hidden.</p>
</ng-template>

• then 和 else：使用 then 和 else 来分配不同的模板，基于条件动态切换内容。

2.4 *ngSwitch 指令

ngSwitch 是一个更加灵活的条件判断工具，类似于 JavaScript 中的 switch 语句。它根据某个表达式的值来选择渲染不同的模板。

<div [ngSwitch]="color">
  <p *ngSwitchCase="'red'">Red</p>
  <p *ngSwitchCase="'green'">Green</p>
  <p *ngSwitchCase="'blue'">Blue</p>
  <p *ngSwitchDefault>Unknown Color</p>
</div>

• ngSwitch：它绑定到表达式 color 上。
• *ngSwitchCase：匹配 color 的值，当 color 为 'red' 时，渲染对应的内容。
• *ngSwitchDefault：当没有匹配的情况时渲染的默认内容。

3. 嵌套 *ngIf 和 *ngFor

有时你需要在循环中进行条件渲染，Angular 支持在 *ngFor 内部使用 *ngIf。

<ul>
  <li *ngFor="let item of items">
    <span *ngIf="item.isVisible">{{ item.name }}</span>
  </li>
</ul>

• 在这个例子中，只有当 item.isVisible 为 true 时，item.name 才会显示。

4. 结合使用 *ngIf 和 *ngFor

你可以在一个模板中同时使用 *ngIf 和 *ngFor，例如先进行过滤再循环渲染。

<ul>
  <li *ngFor="let item of items">
    <div *ngIf="item.isActive">{{ item.name }}</div>
  </li>
</ul>

5. 使用 ng-container 包裹多个结构性指令

ng-container 是一个虚拟容器，通常用来包裹多个结构性指令，因为它不会在 DOM 中创建额外的节点。

<ng-container *ngIf="isVisible">
  <p>This content is visible!</p>
  <button (click)="toggleVisibility()">Toggle Visibility</button>
</ng-container>

• ng-container 不会在最终的 DOM 中渲染任何元素，它只是用来包装逻辑。

6. 总结

Angular 提供了强大的模板功能来处理循环和逻辑判断：

• *ngFor：用来遍历数组或列表，渲染每个元素。
• *ngIf：根据条件判断渲染或移除 DOM 元素。
• *ngSwitch：类似于 switch 语句，根据条件渲染不同的内容。
• else 和 ng-template：与 *ngIf 配合使用，用于实现条件渲染。
• ng-container：一个虚拟容器，用于组合多个结构性指令而不影响 DOM 结构。