在Angular中的订阅中添加if和else条件

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-example',
  template: `
    <div *ngIf="data$ | async as data; else loading">
      <!-- 显示数据 -->
      {{ data }}
    </div>
    <ng-template #loading>
      <!-- 显示加载中 -->
      Loading...
    </ng-template>
  `,
})
export class ExampleComponent implements OnInit {
  data$: Observable<any>;

  ngOnInit() {
    // 模拟异步获取数据
    this.data$ = this.getData().pipe(
      filter(data => data !== null) // 过滤掉空数据
    );
  }

  getData(): Observable<any> {
    // 返回一个Observable，模拟异步获取数据
    return new Observable(observer => {
      setTimeout(() => {
        observer.next('Hello, World!'); // 发送数据
        observer.complete(); // 完成数据流
      }, 2000);
    });
  }
}