Angular模板中能否定义变量并复用？避免函数多次调用

你遇到的这个场景很常见——Angular的变更检测机制会在每次检查时触发模板里的函数调用，导致getHeroAttribute被多次执行，尤其是列表数据量大的时候，会影响性能。

下面提供两种符合你需求的解决方案，既能复用函数返回的属性，又不用直接访问hero.name或hero.skills：

方案一：模板内用*ngIf as缓存函数结果 #

利用Angular的*ngIf语法可以将表达式结果赋值给变量的特性，结合ng-container（不会生成额外DOM元素）来缓存getHeroAttribute的返回值，这样在同一个hero的范围内可以重复使用这个变量，函数只会被调用一次：

<div *ngFor="let hero of heroes">
  <ng-container *ngIf="getHeroAttribute(hero) as heroAttr">
    <p>Name: {{ heroAttr.name || '' }}</p>
    <p>Skills: {{ heroAttr.skills || '' }}</p>
  </ng-container>
</div>

如果希望把缓存变量绑定在父div上，可以把*ngFor移到ng-container上，让div承载*ngIf：

<ng-container *ngFor="let hero of heroes">
  <div *ngIf="getHeroAttribute(hero) as heroAttr">
    <p>Name: {{ heroAttr.name || '' }}</p>
    <p>Skills: {{ heroAttr.skills || '' }}</p>
  </div>
</ng-container>

方案二：组件内预处理数据（更优性能） #

如果getHeroAttribute的逻辑比较复杂，建议在组件层面提前处理数据，把每个hero对应的属性结果缓存起来，避免在模板中频繁调用函数：

组件代码示例： #

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

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class HeroesComponent implements OnInit {
  heroes: any[] = []; // 假设这是你的英雄列表数据
  heroAttrList: Array<ReturnType<typeof this.getHeroAttribute>> = [];

  ngOnInit(): void {
    // 初始化时预处理每个hero的属性
    this.heroAttrList = this.heroes.map(hero => this.getHeroAttribute(hero));
  }

  getHeroAttribute(hero: any) {
    // 你的原有函数逻辑，比如从嵌套结构或其他来源获取属性
    return { name: hero.someNestedField.name, skills: hero.someNestedField.skills };
  }

  // 如果heroes是异步获取的（比如从接口），可以用Observable处理：
  // heroesWithAttr$ = this.heroService.getHeroes().pipe(
  //   map(heroes => heroes.map(hero => ({
  //     hero,
  //     attr: this.getHeroAttribute(hero)
  //   })))
  // );
}

模板代码示例： #

<!-- 同步数据的情况 -->
<div *ngFor="let heroAttr of heroAttrList">
  <p>Name: {{ heroAttr.name || '' }}</p>
  <p>Skills: {{ heroAttr.skills || '' }}</p>
</div>

<!-- 异步数据的情况（取消注释即可使用） -->
<!-- <div *ngFor="let item of heroesWithAttr$ | async">
  <p>Name: {{ item.attr.name || '' }}</p>
  <p>Skills: {{ item.attr.skills || '' }}</p>
</div> -->

这种方式的优势是函数只会在数据更新时执行一次，而不是每次变更检测都触发，性能表现更优。

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