在Angular中使用httpClient获取数据时如何显示微调器？

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  ...
  imports: [
    ...
    HttpClientModule
  ],
  ...
})
export class AppModule { }

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

constructor(private http: HttpClient) { }

getData(): Observable<any> {
  return this.http.get<any>('http://api.example.com/data');
}

showSpinner = true;

getDataAndShowSpinner() {
  this.showSpinner = true;
  this.getData().subscribe(
    (data) => {
      // 处理获取到的数据
      // ...
      this.showSpinner = false; // 数据获取完成后隐藏微调器
    },
    (error) => {
      // 处理错误
      // ...
      this.showSpinner = false; // 出错时也要隐藏微调器
    }
  );
}