RxJS中如何在pipe内将接口返回的键值对映射为ICar类型数组

你需要先给httpClient.get指定响应的泛型类型，再通过Object.entries遍历键值对做映射即可，完整代码如下：

import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

export interface ICar {
  key: string;
  carName: string;
}

getCars():Observable<ICar[]> {
   return this.httpClient.get<Record<string, string>>("https://cars.com/cars")
      .pipe(
          map((res) => Object.entries(res).map(([key, carName]) => ({ key, carName }))),
          publishReplay(1), 
          refCount()
      );
}

逻辑说明 #

• httpClient.get<Record<string, string>>：指定接口返回的是键为字符串、值为字符串的对象，避免TS类型报错
• Object.entries(res)：将{"1":"Ford", "2":"Toyota"}这类键值对对象转换为[["1","Ford"], ["2","Toyota"]]格式的二维数组
• 内层map遍历二维数组，将每一项的键值对映射为符合ICar接口定义的对象结构

如果你的TS版本较低不支持Object.entries，也可以用Object.keys实现兼容写法：

map((res) => Object.keys(res).map(key => ({ key, carName: res[key] })))

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