在 Angular 应用中，使用表格来呈现观察数据的常见做法。本文介绍了如何从一个日期范围主题中获取观察数据，然后将其传递到表格中。

1. 首先，创建一个日期范围主题：

import { BehaviorSubject } from 'rxjs';

export class DateRange {
  private _startDate = new BehaviorSubject(null);
  private _endDate = new BehaviorSubject(null);

  get startDate$() {
    return this._startDate.asObservable();
  }

  get endDate$() {
    return this._endDate.asObservable();
  }

  set startDate(startDate: Date) {
    this._startDate.next(startDate);
  }

  set endDate(endDate: Date) {
    this._endDate.next(endDate);
  }
}

2. 在组件中，在 ngOnInit 方法中订阅日期范围主题，并在日期范围更改时获取相应的观察数据：

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

import { DateRange } from './date-range';
import { DataService } from './data.service';

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

      

        

          
Name
          
Date
          
Amount
        
      
      

        

          
{{ item.name }}
          
{{ item.date | date }}
          
{{ item.amount }}
        
      
    
  `
})
export class TableComponent implements OnInit {
  items$: Observable;

  constructor(private dataService: DataService, private dateRange: DateRange) {}

  ngOnInit() {
    const startDate$ = this.dateRange.startDate$;
    const endDate$ = this.dateRange.endDate$;

    this.items$ = combineLatest([startDate$, endDate$]).pipe(
      switchMap(([startDate, endDate]) => {
        return this.dataService.getItems(startDate, endDate);
      })
    );
  }
}

在上面的示例代码中，DataService 是一个服务，它提供了一个 getItems(startDate, endDate) 方法，它获取在给定的日期范围内的条目。

3. 在模板中使用 DateRange 组件，例如