Angular Firebase async inside map函数

npm install firebase @angular/fire

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor(private firestore: AngularFirestore) {}

  getUserData(userId: string): Observable<any> {
    return this.firestore.collection('users').doc(userId).valueChanges();
  }

  processUserData(userId: string): Observable<any> {
    return this.getUserData(userId).pipe(
      switchMap(userData => {
        // 这里可以进行异步操作，例如调用另一个 API
        return this.someAsyncOperation(userData);
      })
    );
  }

  private someAsyncOperation(userData: any): Observable<any> {
    // 模拟异步操作，例如 HTTP 请求
    return new Observable(observer => {
      setTimeout(() => {
        observer.next(`Processed data for ${userData.name}`);
        observer.complete();
      }, 1000);
    });
  }
}

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  template: `
    <div *ngIf="processedData">
      {{ processedData }}
    </div>
  `
})
export class UserComponent implements OnInit {
  processedData: string;

  constructor(private userService: UserService) {}

  ngOnInit() {
    const userId = 'someUserId'; // 替换为实际的用户 ID
    this.userService.processUserData(userId).subscribe(data => {
      this.processedData = data;
    });
  }
}