Angular 14中http get方法内设置数组值及资源读取问题解决

在Angular项目中通过HTTP GET方法读取assets目录下的本地JSON文件时，请求返回200状态码，但subscribe回调内给组件数组属性的赋值逻辑未正常生效，无法拿到目标数据完成渲染。
问题涉及的组件代码如下：

// app.component.ts
ngOnInit(): void { 
    this.httpClient.get<any>('assets/data.json').subscribe((data) => {
      console.log(data);
      this.selectOptions = data;
    });
  }

200状态码仅代表请求收到了服务器响应，不代表响应内容符合预期，赋值失效通常是三类问题：

• 异步时序错误：HTTP请求是异步执行的，若在subscribe回调外部同步读取selectOptions，此时请求还未返回、赋值逻辑还没执行，拿到的只是属性初始空值，会误以为赋值失败
• 静态资源映射错误：返回200不代表拿到的是目标JSON，Angular路由兜底逻辑会把不存在的资源路径重定向到index.html，此时响应内容是HTML源码，赋值后格式完全不符合数组要求
• 数据结构不匹配：data.json的实际结构不是直接的数组，比如是{ list: [] }这种包裹对象，直接赋值给数组属性会导致渲染异常

按顺序操作即可定位修复：

1. 先查看控制台console.log(data)的打印结果

   如果能正常打印出你预期的数组内容，说明请求和赋值逻辑本身没有问题，问题出在时序上：所有依赖selectOptions的业务逻辑，都必须放到subscribe回调内部执行，也可以结合RxJS的Observable对象用async管道在模板中自动订阅处理异步值，不要在ngOnInit等生命周期里同步读取该属性的值。

2. 如果控制台打印的是HTML字符串（即项目index.html的源码内容），说明本地资源路径配置错误
   • 打开angular.json文件，找到对应构建环境的assets配置项，确认已将src/assets目录加入静态资源白名单，参考配置：

     "assets": [
       "src/favicon.ico",
       "src/assets"
     ]
     

   • 确认data.json文件实际存放在src/assets目录下，请求路径不要额外加src/前缀，保持assets/data.json即可
3. 如果控制台打印的是对象而非数组，说明JSON结构和预期不符，取到实际的数组字段后再赋值即可，比如返回结构为{ data: [] }时，赋值逻辑改为this.selectOptions = data.data

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