使用Getter时Angular Async Pipe导致页面持续加载问题

问题本质 #

在Angular的变更检测周期里，模板中绑定的getter或方法会被频繁调用，每次调用都会返回一个全新的Promise实例。AsyncPipe每次拿到新的Promise都会重新订阅，旧的Promise会被取消订阅，永远等不到resolve的结果，最终导致页面一直处于加载状态，甚至引发无响应的情况。

解决方案 #

把Promise存储为组件的类属性，只在初始化时创建一次，避免每次变更检测都生成新实例：

修改后的组件代码

import { AsyncPipe, CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-cnn',
  standalone: true,
  imports: [CommonModule, FormsModule, AsyncPipe],
  templateUrl: './cnn.component.html',
  styleUrl: './cnn.component.css',
})
export class CnnComponent implements OnInit {
  // 改为类属性存储Promise
  outputImage: Promise<string>;

  constructor() {}

  ngOnInit(): void {
    // 仅在初始化时创建一次Promise
    this.outputImage = Promise.resolve('https://upload.wikimedia.org/wikipedia/commons/4/4f/Extend_Edge-Handling.png');
  }
}

模板代码（保持不变）

<div class="container">
  <div class="output-section">
    <img
      *ngIf="outputImage | async as imageSrc"
      [src]="imageSrc"
      class="preview-image"
    />
  </div>
</div>

额外提示 #

如果需要动态更新图片地址，推荐使用BehaviorSubject这类Observable对象替代Promise，AsyncPipe同样支持订阅Observable，且能更好地处理数据更新场景。另外，尽量避免在模板中直接调用返回异步对象的getter或方法，这是Angular开发中容易踩的性能坑。

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