Angular:从Firestore获取数据。在单击之前，HTML不会使用实时数据进行更新

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

@Injectable({
  providedIn: 'root'
})
export class FirestoreService {
  private itemsCollection: AngularFirestoreCollection<any>;
  items: Observable<any[]>;

  constructor(private afs: AngularFirestore) {
    this.itemsCollection = afs.collection<any>('items');
    this.items = this.itemsCollection.valueChanges();
  }

  getItems(): Observable<any[]> {
    return this.items;
  }
}

import { Component } from '@angular/core';
import { FirestoreService } from './firestore.service';

@Component({
  selector: 'app-root',
  template: `
    <div *ngFor="let item of items | async">
      {{ item.name }}
    </div>
    <button (click)="updateData()">更新数据</button>
  `,
})
export class AppComponent {
  items: Observable<any[]>;

  constructor(private firestoreService: FirestoreService) {
    this.items = this.firestoreService.getItems();
  }

  updateData() {
    // 在这里更新数据
  }
}