Angular POST 请求不返回正确的数据

Question

我正在尝试复制我通过 Angular 中的 Postman 完成的发布请求。在 Postman 中效果很好。我正在发送数据，作为回报，我从 DB 收到了我需要的数据。但是，我似乎无法将请求正确地转换为我的 Angular 服务。

这是我和邮递员一起寄的东西：

{
    "component": "Hero",
    "name": "Superman"
}

这就是我收到的：

{
    "_embedded": {
        "heroValueses": [
            {
                "idValue": 166,
                "idRelation": null,
                "key": "true",
                "text": "S",
                "id": ""
            },
            {
                "idValue": 167,
                "idRelation": null,
                "key": "false",
                "text": "N",
                "id": ""
            }
        ]
    },
    "_links": {
        "self": {
            "href": "http://localhost:8080/api/entities/heroeList/search"
        }
    },
    "page": {
        "size": 2147483647,
        "totalElements": 2,
        "totalPages": 1,
        "number": 0
    }
}

在我的 component.ts 中，我声明了一个包含类型为 <{id: string, text: string}>:

的 Observable 的变量

this.heroPower$ = this.service._lookupHero('Superman', 'Fly');

在我的服务中，我创建了以下 POST 请求：

public _lookupHero(component: string, name: string): Observable<{ id: string, text: string }[]> {
    const url = this.settings.url.resHeroUrl + 'heroList/search'
    const header = "Here is the header";
    const body = {
      component,
      name
    };
    console.log(body, 'bodyyyyyyyyy')
    const res = this.http.post(url, body,{headers: header}).pipe(shareReplay(),
      map(response => {
        return response;
      }),
      catchError(err => of({err}))
    );
    return new Observable<HeroesValues[]>().pipe(map(res => {
      return res.map(element => {
        return {id: element.key, text: element.text };
      })
    }));
  }
}

“HeroesValues”是 ts 文件，其中应包含要返回的数据的模型。但是，由于我对此很陌生，所以我不明白自己做错了什么。