Angular模板函数使用疑问：formControl方法与includes是否可行？

为什么响应式表单的.hasError()/.get()可以安全用在模板里？ #

Angular响应式表单的控件实例（如FormControl、FormGroup）上的.hasError()和.get()方法，属于轻量且状态驱动的操作：

• 这些方法内部只是直接访问控件的内部状态属性（比如errors对象、子控件映射），没有复杂计算或副作用；
• Angular的变更检测对表单控件做了优化：只有当控件的状态（值、验证状态、禁用状态等）发生变化时，才会触发相关模板表达式的重新计算，不会在每次全局变更检测时都重复执行；
• 文档中推荐这类用法，是因为它们是Angular表单体系的一部分，和框架的变更检测机制适配良好。

模板里使用Array.includes()可行吗？ #

分两种场景判断：

• 静态数组：如果数组是组件内定义的常量（比如const options = [1,2,3]），直接用includes()完全没问题——因为数组不会变化，每次调用返回结果一致，不会触发不必要的性能损耗；
• 动态数组：如果数组是会频繁更新的（比如从API获取的列表、用户操作修改的数组），每次变更检测都会执行includes()。虽然单次includes()开销不大，但如果数组元素很多、变更检测频繁，或者模板中多次调用，累积的性能损耗会显现。

复选框[checked]用includes()的替代方案 #

直接写[checked]="selectedIds.includes(item.id)"是直观，但如果selectedIds频繁变化，确实会有重复计算的问题。可以用这些方案避免冗余变量：

1. 用Set替代数组提升性能 #

Set.has()的时间复杂度是O(1)，比Array.includes()的O(n)高效得多。在组件内维护一个Set实例：

// 组件类
selectedIds: number[] = [];
selectedIdSet = new Set<number>();

ngOnChanges(changes: SimpleChanges) {
  if (changes.selectedIds) {
    // 仅当selectedIds变化时更新Set
    this.selectedIdSet.clear();
    this.selectedIds.forEach(id => this.selectedIdSet.add(id));
  }
}

模板中直接用：

<input type="checkbox" [checked]="selectedIdSet.has(item.id)">

如果用RxJS管理数据，可以直接把数组转成Set的Observable，配合async管道：

selectedIdSet$ = this.selectedIds$.pipe(map(ids => new Set(ids)));

模板：

<input type="checkbox" [checked]="(selectedIdSet$ | async)?.has(item.id)">

2. 自定义纯管道 #

纯管道只有在输入参数变化时才会重新计算，避免每次变更检测都执行includes()：

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

@Pipe({ name: 'includes' })
export class IncludesPipe implements PipeTransform {
  transform<T>(array: T[], value: T): boolean {
    return array?.includes(value) ?? false;
  }
}

模板中使用：

<input type="checkbox" [checked]="selectedIds | includes: item.id">

为什么Angular没有内置includes管道？ #

Angular内置管道都是通用型、高频使用的工具（比如async、date、uppercase），而includes这类操作属于细分场景：

• 大多数场景下，开发者可以通过组件内用Set优化、或者简单几行代码自定义管道实现，不需要内置；
• 内置过多细分管道会导致Angular核心库体积膨胀，反而增加开发者的学习成本；
• 从性能角度，组件内直接用Set的方案，比管道更高效（管道需要额外的实例化和参数传递开销）。

内容的提问来源于stack exchange，提问作者Craig Armstrong