Angular 结合 JSON Server 如何根据ID查询获取对应数据

你现有的代码逻辑存在问题：getOne() 是异步HTTP请求方法，返回的是RxJS的Observable流，不能直接像操作本地数组一样用find同步查找数据，需要按照以下步骤调整代码：

第一步：在component.ts中注入服务 #

首先要将你编写的请求服务注入到当前组件，假设你的服务类名为PostService，示例代码如下：

// 先引入服务
import { PostService } from '你的服务文件相对路径';

// 组件类中注入服务
constructor(private postService: PostService) {}

// 新增变量存储查询结果
resultText: string = '';

第二步：修改getDataText方法，替换原有逻辑 #

你原来写的myData是假设的本地数据数组，现在需要直接调用getOne()接口订阅返回结果，不需要额外做本地查找，因为你请求http://localhost:3000/posts/[id]时，json-server已经自动按ID过滤返回对应单条数据：

getDataText(id: number) {
  // 调用服务的getOne接口订阅返回结果
  this.postService.getOne(id).subscribe({
    next: (res) => {
      // 请求成功，存在数据就取text字段，不存在就提示
      this.resultText = res ? res.text : `ID为${id}的数据不存在`;
    },
    error: () => {
      // 请求失败（比如ID不存在时json-server会返回404状态码）
      this.resultText = `找不到ID为${id}的数据`;
    }
  })
}

第三步：修改HTML模板显示结果 #

把按钮的文本翻译为中文，同时新增结果展示字段：

<button [disabled]="!idForm.valid" class="btn btn-primary mt-3" (click)="getDataText(id)">获取详情</button>
<!-- 新增查询结果展示 -->
<p>{{ resultText }}</p>

可选方案：本地缓存数据查找 #

如果你不想每次查询都发请求，已经提前把所有post数据存在本地缓存数组postList里，那直接把myData替换为你的本地缓存数组postList即可，注意要先调用列表接口把全量数据存到postList才能正常查找。

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