无法理解地图在 Angular 中的工作原理

问题描述

我想先说我是一个 Angular 菜鸟。所以我正在开发一个实现 typeahead 功能的应用程序，我正在通过部署在 GCP 上的 Express 后端进行 HTTP 调用，以根据搜索关键字从 TMDB 数据库中获取搜索结果。

this.http
      .get<any>('https://hw8-308202.wl.r.appspot.com/search?search='+term).pipe(
        map(data => data
        ))
        .subscribe(data => console.log(data));

我收到诸如 -

之类的回复

[
    {
        "id": 10255,"backdrop_path": "NA","media_type": "movie","title": "Ab-normal Beauty"
    },{
        "id": 1320678,"media_type": "person","title": "NA"
    },{
        "id": 131563,{
        "id": 259172,"backdrop_path": "/iZfCRsA9wcTZ0yWsuhXSHe4krdy.jpg","title": "Beyond the Great Wall"
    },{
        "id": 115301,{
        "id": 107531,{
        "id": 1820070,"title": "NA"
    }
]

现在，afaik 当我将上面的内容传递给 map 时，它应该遍历每个 json，但它将整个响应视为一次迭代。我无法迭代单个结果并仅提取标题。我该怎么做？

解决方法

您指的是 array.map。 observable 中的 map 与它不同。 你必须这样做。

this.http.get<any>('https://hw8-308202.wl.r.appspot.com/search?search='+term).pipe(
   map(data => {
     const titles: string[] = [];
     for (const e of data) {
       titles.push(e.title);
     }
     return titles;
   })
).subscribe(data => console.log(data));