无法将HTTP GET返回数据赋值给同结构TypeScript Person对象

你遇到的问题主要来自两个关键方面：异步操作的执行顺序问题，以及JSON响应键名与Person类属性的匹配问题，下面逐个给出针对性的解决办法：

1. 修复异步调用顺序问题 #

在你的ngOnInit方法里，route.params.subscribe是异步操作——这意味着你在订阅外部直接调用this.getPerson(this.personId)时，personId还没被赋值（此时是undefined）。只有当路由参数加载完成后，subscribe的回调才会执行并给personId赋值，但此时getPerson已经执行过了，不会重新触发正确的请求。

修改ngOnInit，把getPerson的调用移到subscribe回调内部，确保拿到有效personId后再发起请求：

ngOnInit() { 
  this.route.params.subscribe(params => { 
    this.personId = params['person-id'];
    // 拿到正确的personId后再调用接口
    this.getPerson(this.personId); 
  }); 
}

这样每次路由参数变化时，都会用正确的personId发起请求，不会再出现传undefined的情况。

2. 修复JSON响应与Person类的映射问题 #

你提到响应的JSON格式是{ PersonID: 1, Name: 'Name' }，如果你的Person类采用的是驼峰式属性命名（比如personId、name），Angular的HttpClient不会自动转换键名的大小写——它只是做类型断言，不会帮你映射不同命名规则的属性。

所以需要在服务的map操作中手动转换键名，确保响应数据能正确赋值到Person对象的属性上：

修改服务的getPerson方法：

getPerson(personId: number): Observable<Person> { 
  let urlParams = new HttpParams().set("personId", personId.toString()); 
  return this.http.get<any>(this.apiUrl, { params: urlParams}) 
    .pipe(
      map((data: any ) => { 
        // 手动映射JSON键名到Person类的属性
        return {
          personId: data.PersonID,
          name: data.Name
          // 如果Person还有其他属性，在这里继续补充映射关系
        } as Person; 
      }), 
      catchError(error => { 
        return throwError('Something went wrong!'); 
      }) 
    ); 
}

额外优化建议：使用async管道简化异步操作 #

如果你不想手动管理订阅，可以在组件中使用Observable<Person>代替直接的Person对象，然后在模板中用async管道处理，这样既能简化代码，还能避免内存泄漏：

组件代码修改：

export class DisplayPersonComponent implements OnInit { 
  person$: Observable<Person>;

  constructor(private route: ActivatedRoute, private service: PersonService) { } 

  ngOnInit() { 
    this.person$ = this.route.params.pipe(
      map(params => params['person-id']),
      switchMap(id => this.service.getPerson(id))
    );
  } 
}

模板中使用：

<div *ngIf="person$ | async as person">
  <p>ID: {{person.personId}}</p>
  <p>Name: {{person.name}}</p>
</div>

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