如何在Angular HTML组件循环中声明临时变量存储函数返回值？

你原来的模板写法在Angular里不生效，因为模板表达式不支持直接赋值语句。下面提供三种可行的解决方法：

方法一：利用ng-container和ngIf的变量赋值语法 #

这种方法不会生成额外DOM元素，且能在局部作用域内存储函数返回值：

<div *ngFor="let list of sampleLists">
  <ng-container *ngIf="getMyFunction(list) as result">
    <div> 
      {{ result.Value }}
      {{ result.Name }}
    </div>
  </ng-container>
</div>

注意：如果getMyFunction可能返回null或undefined，对应的内容会被隐藏。如果需要即使返回空值也渲染，可以结合else分支使用。

方法二：将函数转换为纯管道（推荐用于无副作用的纯函数） #

如果getMyFunction是纯函数（相同输入返回固定结果，无异步操作或状态变更），可以把它改成Angular管道，Angular会自动缓存管道结果，避免每次变更检测重复执行函数：

1. 先创建管道：

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

@Pipe({ name: 'myFunction' })
export class MyFunctionPipe implements PipeTransform {
  transform(list: any): any {
    // 复制原getMyFunction的逻辑
    return { 
      Value: list.someValue, 
      Name: list.someName 
    };
  }
}

2. 在模板中使用：

<div *ngFor="let list of sampleLists">
  <div> 
    {{ (list | myFunction).Value }}
    {{ (list | myFunction).Name }}
  </div>
</div>

方法三：提前在组件中处理数据（性能最优） #

如果数据不会频繁变动，建议在组件初始化时提前处理好所有结果，模板直接使用处理后的数据，避免在模板中调用函数：

1. 组件逻辑：

processedLists: Array<{ original: any; result: any }> = [];

ngOnInit(): void {
  this.processedLists = this.sampleLists.map(list => ({
    original: list,
    result: this.getMyFunction(list)
  }));
}

2. 模板使用：

<div *ngFor="let item of processedLists">
  <div> 
    {{ item.result.Value }}
    {{ item.result.Name }}
  </div>
</div>

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