以下是一个使用async管道和可观察对象的加载指示器的示例代码：

1. 创建一个名为isLoading的布尔变量，用于追踪数据是否正在加载。

2. 在组件中定义一个data$的可观察对象，用于获取数据。

3. 在模板中，使用async管道将可观察对象绑定到HTML元素上，并使用*ngIf指令根据isLoading的值显示或隐藏加载指示器。

组件代码示例：

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

@Component({
  selector: 'app-root',
  template: `
    

      
      
{{ data }}
    
    
      
      
Loading...
    
  `,
})
export class AppComponent {
  isLoading = false;
  data$: Observable;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.isLoading = true;
    this.data$ = this.dataService.getData().pipe(
      finalize(() => {
        this.isLoading = false;
      })
    );
  }
}

数据服务示例代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get('https://api.example.com/data');
  }
}

在这个示例中，当组件初始化时，isLoading变量被设置为true，加载指示器将显示出来。然后，通过数据服务获取数据，并将isLoading变量在可观察对象的finalize操作符中设置为false，以确保数据加载完成后加载指示器被隐藏。