Angular中如何将Observable的值存储到组件变量或属性

嘿，我懂你的需求——你已经能成功从Firestore拿到数据，既能在控制台打印又能在模板里插值，但现在想把完整的数据集存到组件的属性/变量里，方便后续业务逻辑使用对吧？咱们一步步来调整你的代码：

1. 先在组件中定义存储数据的属性 #

首先，在组件类里添加一个数组属性，用来保存完整的Cadets数据集：

// 组件类内定义
cadets: Cadets[] = [];

2. 修改订阅逻辑，将完整数据存入属性 #

你原来的代码里只提取了数组的第一个元素并赋值给单个属性，现在我们把整个数组赋值给上面定义的cadets变量，同时保留你需要的单个属性赋值：

this.cadetCollection.valueChanges().subscribe(x => {
  // 把完整的数据集存到组件属性里，方便后续使用
  this.cadets = x as Cadets[];
  
  // 依然保留你原来的单个属性赋值逻辑（记得加长度判断避免空指针）
  if (this.cadets.length > 0) {
    this.cadetName = this.cadets[0].Cadet;
    this.cadetCompany = this.cadets[0].Company;
    this.cadetId = this.cadets[0].CadetId;
  }
});

注意：原来代码里的return x as Cadets[]在subscribe的回调里是无效的，因为回调函数的返回值会被忽略，直接删掉就好。

3. 重要：避免内存泄漏 #

直接订阅Observable如果不手动取消，会在组件销毁后依然存在，导致内存泄漏。这里推荐两种Angular常用的处理方式：

方式一：使用Async Pipe（更推荐的Angular风格）

把Observable直接赋值给组件属性，然后在模板里用async pipe，Angular会自动帮你管理订阅和取消：

// 组件类内定义Observable属性
cadets$: Observable<Cadets[]>;

ngOnInit() {
  this.cadets$ = this.cadetCollection.valueChanges() as Observable<Cadets[]>;
  
  // 如果需要在组件内部处理数据，可以用tap操作符
  this.cadets$.pipe(
    tap(x => {
      if (x.length > 0) {
        this.cadetName = x[0].Cadet;
        this.cadetCompany = x[0].Company;
        this.cadetId = x[0].CadetId;
      }
    })
  ).subscribe();
}

模板中使用时：

<!-- 遍历整个数据集 -->
<div *ngFor="let cadet of cadets$ | async">{{ cadet.Cadet }}</div>
<!-- 或者直接用单个属性 -->
<p>当前学员：{{ cadetName }}</p>

方式二：使用takeUntil管理订阅

定义一个销毁主题，在组件销毁时触发，自动取消所有关联的订阅：

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

// 组件类内定义销毁主题
private destroy$ = new Subject<void>();

ngOnInit() {
  this.cadetCollection.valueChanges()
    .pipe(takeUntil(this.destroy$)) // 绑定到销毁主题
    .subscribe(x => {
      this.cadets = x as Cadets[];
      if (this.cadets.length > 0) {
        this.cadetName = this.cadets[0].Cadet;
        this.cadetCompany = this.cadets[0].Company;
        this.cadetId = this.cadets[0].CadetId;
      }
    });
}

// 组件销毁时触发取消订阅
ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

这样调整后，你就可以在组件的任何方法里直接使用this.cadets这个属性来操作完整的Firestore数据集啦！

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