要实现从Firestore获取数据并在HTML中实时更新数据的效果，可以使用Angular的Observables和订阅功能。下面是一个示例代码，演示了如何实现这个功能：

1. 创建一个Angular服务，用于从Firestore获取数据：

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

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private firestore: AngularFirestore) { }

  getData(): Observable {
    return this.firestore.collection('data').valueChanges();
  }
}

2. 在组件中使用该服务，并订阅数据的变化：

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

@Component({
  selector: 'app-data',
  template: `
    获取数据
    

      
{{ item.name }}
    
  `
})
export class DataComponent implements OnInit {

  data: any[];

  constructor(private dataService: DataService) { }

  ngOnInit() {
  }

  getData() {
    this.dataService.getData().subscribe(data => {
      this.data = data;
    });
  }
}

在上面的代码中，当点击“获取数据”按钮时，将调用getData()方法。该方法通过订阅DataService中的getData()方法返回的Observable来获取数据。一旦数据发生变化，订阅函数将被调用，并更新组件的data属性。

这样，每次点击“获取数据”按钮时，HTML中的数据就会实时更新。