Angular ngFor 条件管道 - TypeScript

简介

Angular 提供了 ngFor 指令，用于循环渲染数组或对象的内容。有时候，我们需要根据某些条件对循环渲染的内容进行筛选或加工，这时候就可以使用 Angular 的管道（Pipe）功能。

本文将介绍如何在 Angular 中使用 ngFor 对数组或对象进行循环渲染，并结合条件管道实现内容的筛选或加工。

基本语法

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

其中，

• element：指定要进行循环渲染的 HTML 元素。
• item：指定当前迭代的元素变量名。
• items：指定要进行循环渲染的数组或对象。

条件管道

Angular 提供了一些常用的管道，如 DatePipe、LowerCasePipe、UpperCasePipe 等等，它们用于对数据进行格式化、转换等处理。除了这些常用的管道之外，我们还可以自定义管道来实现特定的功能。

下面我们将通过一个示例来演示如何使用 ngFor 结合条件管道实现内容的筛选和加工。

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h2>All Persons:</h2>
    <ul>
      <li *ngFor="let person of persons">{{ person.name }} ({{ person.age }})</li>
    </ul>

    <h2>Adult persons:</h2>
    <ul>
      <li *ngFor="let person of adults">{{ person.name }} ({{ person.age }})</li>
    </ul>
  `,
})
export class AppComponent {
  persons = [
    {name: 'John', age: 25},
    {name: 'Mary', age: 18},
    {name: 'Peter', age: 30},
    {name: 'May', age: 16},
  ];

  adults = this.persons.filter(p => p.age >= 18);
}

我们定义了一个 persons 数组，里面存储了每个人的姓名和年龄。我们希望在页面上渲染出所有人的信息，并且只显示成年人的信息。

以上面的代码为例，我们使用 filter 函数将 persons 数组中的元素进行筛选，得到 adults 数组，它只包含年龄大于等于 18 岁的人。然后在 HTML 模板中使用 ngFor 指令对 adults 数组进行循环渲染，即可实现只显示成年人的信息。

自定义管道

除了使用 Angular 内置的管道之外，我们还可以自定义管道来实现特定的功能。

自定义管道的语法格式为：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'custom' })
export class CustomPipe implements PipeTransform {
  transform(value: any, ...args: any[]): any {
    // 对数据进行处理
  }
}

其中，

• name：指定管道的名称，用于在 HTML 模板中调用。
• transform：定义管道的处理逻辑。它接收一个数据（value）和可选参数（args），并返回处理后的结果。

下面我们将通过一个示例来演示如何自定义管道。

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h2>Original numbers:</h2>
    <ul>
      <li *ngFor="let num of numbers">{{ num }}</li>
    </ul>

    <h2>Transformed numbers:</h2>
    <ul>
      <li *ngFor="let num of numbers | arrayFilter">{{ num }}</li>
    </ul>
  `,
})
export class AppComponent {
  numbers = [1, 2, 3, 4, 5];
}

// array-filter.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'arrayFilter' })
export class ArrayFilterPipe implements PipeTransform {
  transform(value: any[], args?: any[]): any[] {
    if (!Array.isArray(value)) {
      return value;
    }

    const filterFn: (value: any, index: number, array: any[]) => boolean = args && args.length > 0 ? args[0] : (value, index, array) => true;

    return value.filter(filterFn);
  }
}

我们定义了一个 numbers 数组，里面存储了一些数字。我们希望将这些数字除以 2，并且只显示小于 3 的数字。于是我们定义了一个自定义管道 ArrayFilterPipe，它接收一个数组和一个回调函数作为参数，用于对数组进行筛选操作。

在 HTML 模板中，我们使用 ngFor 指令对 numbers 数组进行循环渲染，并在管道中传递一个回调函数，用于筛选数字。这样就实现了对数组内容的加工和筛选。

总结

本文介绍了在 Angular 中使用 ngFor 结合条件管道实现内容的筛选和加工，以及如何自定义管道实现特定的功能。

ngFor 指令和管道功能都是 Angular 提供的非常强大的功能，深入掌握它们必将大大提高 Angular 开发效率。