使用 angular 的 RxJS 操作符转换响应数据

问题描述

我有如下服务响应。

  "amount": 3330,"count": 56,"dataObjects": [
    {
      "links": {
        "self": "http://localhost:4200/api/collection/"
      },"id": "W391","objectNumber": "IN-W391","title": "Image 23","webImage": {
        "guid": "89de22aa-e19f-4c83-87ff-26dd8f319c05","width": 1200,"height": 800,"url": "http://localhost:4200/api/collection/7qzT0pbclLB7y3fdS1GxzMnV7m3gD3gWnhlquhFaJSn6gNOvMmTUAX3wVlTzhMXIs8kM9IH8AsjHNVTs8em3XQI6uMY=s0"
      }
    },{
      "links": {
        "self": "http://localhost:4200/api/collection/"
      },"url": "http://localhost:4200/api/collection/7qzT0pbclLB7y3fdS1GxzMnV7m3gD3gWnhlquhFaJSn6gNOvMmTUAX3wVlTzhMXIs8kM9IH8AsjHNVTs8em3XQI6uMY=s0"
      }
    }
  ]
}

我要做的就是只检索 dataObjects 数组，以便我可以遍历它并绑定 webImage 下的 url并将其显示在 UI 中。这是我尝试过的

Component.ts

ngOnInit() {
this.artistService.GetArtistDetails().pipe(map( response=> response.dataObjects))
    .subscribe((artists: any[])=>{
      console.log(artists);
    });  
  }
}

Service.ts

 public GetArtistDetails(){
    return this.httpClient.get(this.REST_API_SERVER);
  }

提前致谢

解决方法

除了 A2Ia 所说的之外，这里还有一个可以按要求工作的示例代码：

stackblitz 应用程序：https://stackblitz.com/edit/angular-ivy-1ixvmx?file=src/app/app.component.ts

结果：https://angular-ivy-1ixvmx.stackblitz.io