如何将服务的输出映射到Angular中具有特定值的对象？

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class DataService {
  // 假设这里是从后端获取的数据
  private data = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
    { id: 3, name: 'Bob' }
  ];

  getData(): Observable<any> {
    // 将数据作为Observable返回
    return Observable.of(this.data);
  }
}

import { Component } from '@angular/core';
import { DataService } from '路径/data.service';

@Component({
  selector: 'app-example',
  template: `
    <ul>
      <li *ngFor="let item of filteredData$ | async">{{ item.name }}</li>
    </ul>
  `
})
export class ExampleComponent {
  filteredData$: Observable<any>;

  constructor(private dataService: DataService) {
    this.filteredData$ = this.dataService.getData().pipe(
      map(data => data.filter(item => item.id === 2)) // 过滤数据，只保留id为2的对象
    );
  }
}