Angular模板用async pipe订阅方法返回Observable触发无限循环求助

核心问题是你在模板表达式中直接调用了getFile()方法，触发了Angular变更检测的循环逻辑：

• Angular的变更检测会在每一轮检测周期中重新执行所有模板内的方法调用，用于判断返回值是否发生变化
• 每次调用getFile()都会返回一个新的Observable实例，async管道检测到实例变化后，会自动取消旧订阅、重新订阅新的Observable，触发新一轮FileReader读取逻辑
• FileReader加载完成调用subscriber.next()返回新的dataURL时，会再次触发变更检测，重新调用getFile()生成新的Observable，最终形成无限循环

方案1：预生成dataURL缓存（最推荐，性能最优） #

在获取文件列表时就提前读取好所有文件的dataURL，存到缓存容器中，模板直接读取缓存值，避免在模板内调用方法。
组件代码示例：

// 新增dataURL缓存容器
fileDataUrls = new Map<File, string>();

// 在文件上传/添加到files数组的逻辑中调用，预加载文件数据
preloadFileDataUrl(file: File) {
  const reader = new FileReader();
  reader.addEventListener("load", ev => {
    this.fileDataUrls.set(file, reader.result as string);
  });
  reader.readAsDataURL(file);
}

// 移除文件时同步清理缓存，避免内存泄漏
clickRemove(file: File) {
  // 原有移除文件逻辑保持不变
  this.fileDataUrls.delete(file);
}

模板修改：

<ng-container *ngIf="fileDataUrls.get(file) as dataURL">
  <img [src]="dataURL">
</ng-container>

方案2：缓存Observable结果（适合不想修改现有文件读取流程的场景） #

修改getFile方法，让同一个File返回的Observable实例固定，同时缓存读取结果，避免重复生成Observable和重复读取文件。
组件代码示例：

import { shareReplay } from 'rxjs';

// 新增Observable缓存容器
fileObsCache = new Map<File, Observable<string>>();

getFile(file: File): Observable<string> {
  // 同一个File直接返回缓存的Observable
  if (this.fileObsCache.has(file)) {
    return this.fileObsCache.get(file)!;
  }
  const obs = new Observable<string>(
    subscriber => {
      const reader = new FileReader();
      reader.addEventListener("load", ev => {
        subscriber.next(reader.result as string);
        subscriber.complete(); // 读取完成后结束订阅，避免内存泄漏
      });
      reader.readAsDataURL(file);
    }
  ).pipe(
    shareReplay(1) // 缓存1次读取结果，后续订阅直接返回缓存值
  );
  this.fileObsCache.set(file, obs);
  return obs;
}

// 移除文件时同步清理缓存
clickRemove(file: File) {
  // 原有移除文件逻辑保持不变
  this.fileObsCache.delete(file);
}

辅助优化：添加*ngFor的trackBy规则 #

避免列表数据变更时重新渲染所有行，减少不必要的变更检测触发：
模板修改：

<tr *ngFor="let file of files; trackBy: trackByFile">

组件添加对应方法：

trackByFile(index: number, file: File): string {
  return `${file.name}-${file.size}-${file.lastModified}`;
}

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