Angular新手求助：如何从HttpClient.get获取的列表中筛选指定ID项

嘿，作为刚接触Angular的新手，碰到这种数据过滤的问题太正常啦！我来一步步帮你搞定它～

首先，不管你用的是Promise还是Observable，核心思路都是先获取完整的项目列表，再在内存里用数组方法筛选出匹配ID的元素。下面分两种常见场景给你示例：

一、如果你的服务用的是Promise #

假设你的数据服务里已经有了getAllProjects()方法，返回Promise<Project[]>，那你可以新增一个getProjectById()方法，利用then()拿到数组后用find()筛选：

// 项目数据服务中的代码
getProjectById(id: number): Promise<Project | undefined> {
  // 先获取所有项目
  return this.getAllProjects()
    .then(projects => {
      // 从数组中找到第一个匹配ID的项目
      return projects.find(project => project.id === id);
    });
}

在组件里调用的方式：

// 组件中的代码
this.projectService.getProjectById(你的目标ID)
  .then(project => {
    if (project) {
      console.log("找到匹配的项目：", project);
      // 这里就可以把project赋值给组件变量，用来展示详情啦
    } else {
      console.log("没有找到对应ID的项目");
    }
  })
  .catch(error => {
    console.error("获取数据出错：", error);
  });

二、如果你的服务用的是Observable（Angular更常用的方式） #

Angular的HttpClient默认返回Observable，所以这种场景更普遍。我们需要用RxJS的map操作符来转换数据流：

首先记得引入map操作符：

import { map } from 'rxjs/operators';

然后在服务里新增方法：

// 项目数据服务中的代码
getProjectById(id: number): Observable<Project | undefined> {
  return this.getAllProjects()
    .pipe(
      // 用map把整个项目数组转换成匹配的单个项目
      map(projects => projects.find(project => project.id === id))
    );
}

在组件里调用的方式：

// 组件中的代码
this.projectService.getProjectById(你的目标ID)
  .subscribe({
    next: (project) => {
      if (project) {
        console.log("找到匹配的项目：", project);
        // 赋值给组件变量，展示详情
      } else {
        console.log("没有找到对应ID的项目");
      }
    },
    error: (error) => {
      console.error("获取数据出错：", error);
    }
  });

小提示： #

• find()和filter()的区别：find()返回第一个匹配的元素（适合单个详情），filter()返回所有匹配的元素组成的数组（如果有多个同ID的情况才用）。
• 如果你的getAllProjects()是从本地JSON文件获取，比如用HttpClient.get('/assets/projects.json')，那它本身返回的就是Observable<Project[]>，直接套上面的逻辑就行。

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