Angular 16 HttpClient Get请求响应无法返回至组件问题

我在Angular 16项目里用HttpClient发起Get请求，已经在app\models目录创建了请求模型BuildInfoRequest和响应模型BuildInfoResponse，想要通过BuildInfoRequest请求API，并把返回结果映射到BuildInfoResponse里。API没用到Entity Framework或模型，返回的Observable集合和Angular响应模型结构匹配，最终目标是把响应接收进动态Observable集合并在客户端解析JSON。

执行addbuildinfo组件时，API请求已经成功发起，但组件里的buildInfoResponse始终是undefined。经检查，API返回的集合已经成功加载到服务中的buildInfoResponse，但就是传不到组件里。

模型定义 #

请求模型 BuildInfoRequest #

export interface BuildInfoRequest
{
   PleaseSelectFlag: boolean | undefined;
   BusinessUnitInfoID: number| undefined;
   ProductionAreaInfoID: number| undefined;
   BuildInfoID: number| undefined;
   IsActiveFlag: boolean| undefined;
}

响应模型 BuildInfoResponse #

export interface BuildInfoResponse 
{
    "OrgInfoID": number | undefined
    "OrgLevel": number | undefined
    "BusinessUnitInfoID": number | undefined
    "BusinessUnitOverhead"?: string | undefined
    "BusinessUnit": string | undefined
    "BusinessUnitDescription"?: string | undefined
    "ProductionAreaInfoID"?: number | undefined
    "ProductionArea": string | undefined
    "ProductionAreaDescription": string | undefined
    "BuildInfoID": number | undefined
    "BuildName": string | undefined
    "BuildDescription": string | undefined
    "IsActiveFlag": boolean | undefined
}

组件代码（addbuildinfo.component.ts） #

import { Component } from '@angular/core';
import { BuildInfoRequest } from 'src/app/models/buildinforequest.model';
import { BuildInfoResponse } from 'src/app/models/buildinforesponse.model';
import { BuildInfoDataService } from 'src/app/services/buildinfodata.service';

@Component({
  selector: 'app-addbuildinfo',
  templateUrl: './addbuildinfo.component.html',
  styleUrls: ['./addbuildinfo.component.css']
})
export class AddbuildinfoComponent 
{
  model: BuildInfoRequest;
  constructor(private buildInfoDataService: BuildInfoDataService )
  {
    this.model = 
    {
      PleaseSelectFlag: true,
      BusinessUnitInfoID: 1,
      ProductionAreaInfoID: 1,
      BuildInfoID: 1,
      IsActiveFlag: true
    };
  }
  buildInfoResponse!: BuildInfoResponse[];
  onFormSubmit()
  {
    this.buildInfoDataService.GetBuildInfo().subscribe((BuildInfoResponse:any) => 
      {
        console.log(BuildInfoResponse);
        //this.buildInfoResponse = buildInfoResponse.value;
      });
  }
}

服务代码（buildinfodata.service.ts） #

import { Injectable } from '@angular/core';  
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { BuildInfoRequest } from '../models/buildinforequest.model'
import { BuildInfoResponse } from '../models/buildinforesponse.model'
import { Observable, of } from 'rxjs';

@Injectable(
    {
        providedIn: 'root'
    }
)  

export class BuildInfoDataService  
{  
    constructor(private http: HttpClient)  
    {   
    }  
        GetBuildInfo() 
        {
          return this.http.get<{[key: string]: BuildInfoResponse}>('https://localhost:7049/TestIT/BuildInfo')
            .pipe(map((BuildInfoResponse) => {
              const buildInfoResponse = [];
              for (const key in BuildInfoResponse)
              {
                if (BuildInfoResponse.hasOwnProperty(key))
                {
                  buildInfoResponse.push({...BuildInfoResponse[key], buildInfoResponse: key})
                }
              }
              console.log(buildInfoResponse);
            }));
    }
} 

问题原因 #

1. 服务端map操作无返回值：在buildinfodata.service.ts的map操作里，只处理了数据并存入buildInfoResponse数组，但最后没有返回这个数组。RxJS的map操作符需要返回处理后的数据，否则上游Observable会传递undefined到订阅者（也就是组件）。
2. 组件内赋值语句错误：组件里注释的this.buildInfoResponse = buildInfoResponse.value;存在两个问题：一是变量名大小写不匹配（参数是BuildInfoResponse，写的是buildInfoResponse）；二是API返回的已经是处理后的数组，不需要.value。

修复方案 #

1. 修复服务中的map操作 #

修改buildinfodata.service.ts的GetBuildInfo方法，在map回调最后返回处理好的buildInfoResponse数组：

GetBuildInfo(): Observable<BuildInfoResponse[]> 
{
  return this.http.get<{[key: string]: BuildInfoResponse}>('https://localhost:7049/TestIT/BuildInfo')
    .pipe(map((BuildInfoResponse) => {
      const buildInfoResponse = [];
      for (const key in BuildInfoResponse)
      {
        if (BuildInfoResponse.hasOwnProperty(key))
        {
          buildInfoResponse.push({...BuildInfoResponse[key], buildInfoResponse: key})
        }
      }
      console.log(buildInfoResponse);
      // 新增返回语句
      return buildInfoResponse;
    }));
}

2. 修复组件内的赋值逻辑 #

修改addbuildinfo.component.ts的onFormSubmit方法，取消注释并修正赋值语句：

onFormSubmit()
{
  this.buildInfoDataService.GetBuildInfo().subscribe((buildInfoResponse: BuildInfoResponse[]) => 
    {
      console.log(buildInfoResponse);
      this.buildInfoResponse = buildInfoResponse;
    });
}

这样修改后，服务会把处理好的数组传递给组件，组件就能正确接收并赋值给buildInfoResponse变量了。

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