如何在Angular 2中通过ID获取指定产品的数据

看起来你已经搭好了基础框架，但因为mock-heroes.json是一个英雄数组而非单个英雄对象，直接请求文件只能拿到整个列表。我们需要先获取完整数组，再从中筛选出对应ID的英雄。这里是完整的实现方案：

首先，确保你导入了RxJS的必要操作符和工具：

import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

然后修改你的getParticularHero函数：

getParticularHero(id: number): Observable<Hero | undefined> {
  // 先请求整个英雄数组
  return this.http.get<Hero[]>('assets/api/mock-heroes.json').pipe(
    // 从数组中找到ID匹配的英雄
    map(heroes => heroes.find(hero => hero.id === id)),
    // 处理请求错误的情况
    catchError(error => {
      console.error('获取英雄列表时出错:', error);
      // 如果出错，返回一个包含undefined的Observable，也可以根据需求抛出错误
      return of(undefined);
    })
  );
}

代码解释： #

• this.http.get<Hero[]>：明确告诉HTTP客户端我们期望获取一个Hero类型的数组
• map(heroes => heroes.find(...))：用数组的find方法筛选出ID匹配的英雄，找不到时会返回undefined
• catchError：捕获请求过程中的错误，避免订阅者收到错误通知，你可以根据业务需求调整这里的处理逻辑（比如抛出自定义错误）

在组件中调用的示例： #

// 假设你在组件中注入了HeroService
constructor(private heroService: HeroService) {}

// 调用获取详情的方法
loadHeroDetails(heroId: number) {
  this.heroService.getParticularHero(heroId).subscribe(hero => {
    if (hero) {
      console.log('找到目标英雄:', hero);
      // 这里可以把英雄数据赋值给组件变量，用于页面渲染
      this.currentHero = hero;
    } else {
      console.log(`未找到ID为${heroId}的英雄`);
      // 处理英雄不存在的情况，比如显示提示信息
    }
  });
}

这样就能通过ID正确获取到对应的英雄详情了。如果你的mock JSON结构不同（比如不是直接的数组），可以根据实际结构调整map里的逻辑。

内容的提问来源于stack exchange，提问作者Nitin Tayal