Angular 把 Observable 变成一个数组答案

【问题标题】：Angular turn Observable into an arrayAngular 把 Observable 变成一个数组
【发布时间】：2018-06-10 14:25:56
【问题描述】：

我正在 Angular 中制作图片库。单击每个图像时，我想显示单独的组件，该组件基本上是单击的图像，但为全尺寸。问题是我不确定如何获取被点击的图片。

到目前为止，我有这项服务可以发出 API 请求以获取图像。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ImagesService {
  constructor(private http: HttpClient) { }
  images = [];
  link = 'https://api.com?k=';
  ApiKey = '12345';

  public loadImages() {
    return this.http.get(this.link + this.ApiKey);
  }
}

然后我有画廊组件，我订阅loadImages()

export class GalleryComponent {
   visibleImages:Object = [];

  constructor(private imagesService: ImagesService) {
    this.imagesService.loadImages().subscribe(data => this.visibleImages = data);
   }
}

然后在 Gallery 组件的 HTML 中显示这样的图像

<li *ngFor="let image of visibleImages">
  <a [routerLink]="['/image', image.id]">
    <img src="{{image.urls.small}}"/>
  </a>
</li>

所以问题是如何获得点击的图像？我在服务中考虑过类似的事情。但是这个问题是如何将我从 API 获得的数据存储到this.images？另外，据我了解，我得到的响应是一个 Observable，所以我不能真正将它存储到一个数组中？

getImage(id:number) {
    this.images.slice(0).filter(image => image.id == id);
  }

在图像组件中

ngOnInit() {
    this.image = this.imagesService.getImage(+this.route.snapshot.params['id'])
  }

【问题讨论】：

不要暴露你的 api 密钥

标签： angular

【解决方案1】：

使用do操作符截取数据：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/do';

@Injectable()
export class ImagesService {
  constructor(private http: HttpClient) { }
  images = [];
  link = 'https://api.unsplash.com/photos/?client_id=';
  ApiKey = 'your key';

  public loadImages() {
    return this
      .http.get(this.link + this.ApiKey)
      .do((images: any[]) => this.images = images)
  }

  getImage(id:number) {
    this.images.slice(0).filter(image => image.id == id);
  }
}

如果 ImageComponent 与 GalleryComponent 在同一页面中，您必须订阅 this.route.params ：

ngOnInit() {
    this.route.params.subscribe(params  => this.image = this.imagesService.getImage(+params['id']))
  }

【讨论】：