Angular中如何通过服务Observable结合ngIf-as异步管道渲染DOM？

错误原因分析 #

你遇到的Property 'i' does not exist on type 'AppComponent'错误，大概率是因为你在*ngIf-as创建的变量作用域之外尝试使用它，或者模板语法没有正确将*ngFor嵌套在*ngIf的作用域内，导致Angular误判变量是组件类的属性。

方案1：直接用服务Observable结合ngIf-as（无组件额外属性） #

不需要在组件里定义额外的Observable，直接在模板中通过ngIf-as存储异步值，注意变量仅在*ngIf的作用域内有效：

<!-- 用ng-container包裹，避免额外DOM节点 -->
<ng-container *ngIf="myService.getServerSentEvent() | async as dataList">
  <!-- 这里的dataList是异步返回的数组，可直接用*ngFor遍历 -->
  <div *ngFor="let item of dataList">
    {{ item.propertyName }} <!-- 替换成你的数据字段 -->
  </div>
</ng-container>

⚠️ 注意：如果你的myService.getServerSentEvent()方法每次调用都会生成新的Observable实例，这种写法会导致重复订阅（比如模板重渲染时多次调用方法），此时建议用方案2。

方案2：组件内定义Observable属性（避免重复订阅） #

如果担心重复订阅造成资源浪费，在组件类里定义一个属性存储Observable实例，仅创建一次：

组件类代码：

import { Component } from '@angular/core';
import { MyService } from './path-to-my-service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 直接赋值服务返回的Observable，仅初始化一次
  data$ = this.myService.getServerSentEvent();

  constructor(private myService: MyService) {}
}

模板代码：

<ng-container *ngIf="data$ | async as dataList">
  <div *ngFor="let item of dataList">
    {{ item.propertyName }}
  </div>
</ng-container>

这种写法不算冗余，反而能保证Observable只被订阅一次，性能更优，是Angular中处理异步数据流的常规写法。

方案3：使用NgRx Let指令（无需条件判断） #

如果你不想依赖*ngIf的条件判断（比如数据流可能返回null/undefined，但你不想销毁DOM），可以用NgRx的*ngLet指令，它专门用来存储异步值：

1. 先在模块中导入LetModule：

import { LetModule } from '@ngrx/component';

@NgModule({
  imports: [
    // 其他模块（比如CommonModule）
    LetModule
  ]
})
export class YourModule {}

2. 模板中使用：

<ng-container *ngLet="myService.getServerSentEvent() | async as dataList">
  <!-- 即使dataList为null，这里的DOM结构也不会被销毁 -->
  <div *ngFor="let item of dataList || []">
    {{ item.propertyName }}
  </div>
</ng-container>

这种方式更灵活，适合需要保持DOM状态的场景，同样可以选择直接用服务的Observable或在组件中定义属性。

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