Angular中*ngFor循环函数多次执行的原因及优化方法咨询

一、函数多次执行的原因 #

这是Angular变更检测机制导致的：

• Angular在组件初始化、用户交互事件触发、异步操作（比如HTTP请求、定时器）完成等场景下，都会触发变更检测周期。
• 每次变更检测时，模板里的所有表达式（包括{{ getValue(field) }}这种函数调用）都会被重新执行一遍，用来检查值是否变化，从而更新视图。
• 你看到的执行次数，其实是数组元素数量 × 变更检测的次数（初始化阶段可能有多轮检测，状态变更后又会触发新的检测），所以才会出现5个元素执行20次、1个元素执行4次的情况。

二、高效实现方式 #

针对需要执行复杂逻辑的场景，推荐以下几种优化方案：

1. 提前预处理数据 #

在组件类中提前计算好需要展示的值，把结果直接存到数组元素里，模板里直接读取预计算的值，避免每次检测都执行函数：

// 组件类中预处理
ngOnInit() {
  this.processedFields = this.fields.map(field => ({
    ...field,
    computedName: this.getValue(field) // 仅执行一次
  }));
}

getValue(field) {
  // 这里放复杂的计算逻辑
  return field.name;
}

模板中使用预处理后的数组：

<div *ngFor="let field of processedFields" >
  <div class="block">{{ field.title }} : {{ field.computedName }}</div>
</div>

2. 使用纯管道（Pure Pipe） #

Angular的纯管道只有当输入参数发生引用变化时才会重新计算，比模板函数高效得多：

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

@Pipe({ name: 'fieldName' })
export class FieldNamePipe implements PipeTransform {
  transform(field: any): string {
    // 复杂计算逻辑
    return field.name;
  }
}

模板中使用管道：

<div *ngFor="let field of fields" >
  <div class="block">{{ field.title }} : {{ field | fieldName }}</div>
</div>

3. 优化变更检测策略 #

给组件设置OnPush变更检测策略，只有当组件的输入属性引用变化、组件内部主动触发变更（比如用ChangeDetectorRef）时，才会触发变更检测，大幅减少检测次数：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush // 开启OnPush策略
})
export class YourComponent {
  // 组件逻辑
}

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