如何将AngularFire Observable快速转换为TS数组以处理组件逻辑？

你可以通过订阅Observable并将数据存入组件变量的方式，在TS文件中获取常规数组，具体步骤如下：

1. 导入Subscription并声明相关变量，用于存储数组和管理订阅：

import { Component, OnDestroy } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/compat/database';
import { BehaviorSubject, Observable, switchMap, Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy {
  time$: Observable<any[]>;
  lineup$: Observable<any[]>;
  // 用于存储常规数组的变量
  lineupData: any[] = [];
  timeData: any[] = [];
  // 管理订阅，防止内存泄漏
  private subscriptions = new Subscription();

  x$ = new BehaviorSubject<string>('race_no_1');
  
  constructor(private db: AngularFireDatabase) {
    // Get Lineups
    this.lineup$ = this.x$.pipe(switchMap((x) => {
      return this.db.list('race/'+x).valueChanges();
    }));

    // Get Race Events
    this.time$ = this.x$.pipe(switchMap((x) => {
        return this.db.list(x).valueChanges();
    }));

    // 订阅Observable，将数据存入组件变量
    this.subscriptions.add(
      this.lineup$.subscribe(data => {
        this.lineupData = data;
        // 这里可以编写基于lineupData的组件逻辑，比如数据处理、计算等
        console.log('Lineup数据更新:', this.lineupData);
      })
    );

    this.subscriptions.add(
      this.time$.subscribe(data => {
        this.timeData = data;
        // 编写基于timeData的组件逻辑
        console.log('Time数据更新:', this.timeData);
      })
    );
  }
  
  race_no(b: string) {
      this.x$.next(b);
  }

  // 组件销毁时取消所有订阅，避免内存泄漏
  ngOnDestroy(): void {
    this.subscriptions.unsubscribe();
  }
}

2. 之后你就可以在组件的任意方法中直接使用lineupData和timeData这两个常规TS数组，比如在自定义方法中处理数据：

processLineupData() {
  // 示例：筛选数组中符合条件的项
  const filtered = this.lineupData.filter(item => item.status === 'active');
  // 后续逻辑...
}

关键说明 #

• 每次x$发射新值切换数据库路径时，订阅会自动接收最新数据并更新lineupData和timeData，保证数据同步。
• 使用Subscription统一管理订阅，在组件销毁时调用unsubscribe()，能有效避免内存泄漏问题。

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