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

Question

我想先声明我是一个 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,
        "backdrop_path": "NA",
        "media_type": "person",
        "title": "NA"
    },
    {
        "id": 131563,
        "backdrop_path": "NA",
        "media_type": "person",
        "title": "NA"
    },
    {
        "id": 259172,
        "backdrop_path": "/iZfCRsA9wcTZ0yWsuhXSHe4krdy.jpg",
        "media_type": "movie",
        "title": "Beyond the Great Wall"
    },
    {
        "id": 115301,
        "backdrop_path": "NA",
        "media_type": "person",
        "title": "NA"
    },
    {
        "id": 107531,
        "backdrop_path": "NA",
        "media_type": "person",
        "title": "NA"
    },
    {
        "id": 1820070,
        "backdrop_path": "NA",
        "media_type": "person",
        "title": "NA"
    }
]

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

Answer 1

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

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));

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

Unable to understand how map works in Angular

angular

typescript

http

angular-httpclient