如何检测使用AngularFire加载的可观察异步项目

import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Injectable()
export class DataService {
  items$: Observable<any[]>;

  constructor(private firestore: AngularFirestore) {
    this.items$ = this.firestore.collection('items').valueChanges();
  }
}

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-items',
  template: `
    <ul>
      <li *ngFor="let item of items">{{ item.name }}</li>
    </ul>
  `
})
export class ItemsComponent implements OnInit {
  items: any[];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.items$.subscribe(items => {
      this.items = items;
      console.log('Items updated:', items);
    });
  }
}

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-items',
  template: `
    <ul>
      <li *ngFor="let item of items$ | async">{{ item.name }}</li>
    </ul>
  `
})
export class ItemsComponent {
  items$ = this.dataService.items$;

  constructor(private dataService: DataService) {}
}

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { DataService } from './data.service';

@Component({
  selector: 'app-items',
  template: `...`
})
export class ItemsComponent implements OnInit, OnDestroy {
  private unsubscribe$ = new Subject<void>();

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.items$
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe(items => {
        // 处理数据
      });
  }

  ngOnDestroy() {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
}