如何从Angular 7中的api获取请求

我正在尝试使用Angular 7中的

HttpClient

获取JSON。这个 代码工作正常，但我正在尝试实现注释代码，并停止使用

CONST IMAGES

，直接从api获取此数据，我还不能这样做

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

@Injectable()
export class ImageService {

  // public _url: string = "https://jsonplaceholder.typicode.com/photos";
  constructor(
    // public http: HttpClient
  ) {}

  theImages = [];
  // IMAGES = [];
  getImages(){
    // this.IMAGES = this.http.get(this._url);
   return this.theImages = IMAGES.slice(0);
 }
  getImage(id: number){
    // this.IMAGES = this.http.get(this._url);
    return IMAGES.slice(0).find(image => image.id == id);
  }

}
const IMAGES = [
  {
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "https://via.placeholder.com/600/92c952",
    "thumbnailUrl": "https://via.placeholder.com/150/92c952"
  },
...

错误代码为：

error TS2740: Type 'Observable<Object>' is missing the following properties from type 'any[]': length, pop, push, concat, and 25 more.

错误TS2740:类型“Observable”缺少类型“any[]”中的以下属性：长度、弹出、推送、concat和更多。

您需要从方法返回一个可观察的

然后订阅

ImageService

实例的方法返回的数据

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

import { first } from 'rxjs/operators';

@Injectable()
export class ImageService {

  public _url: string = "https://jsonplaceholder.typicode.com/photos";

  constructor(public http: HttpClient) {}

  getImages() {
   return this.http.get(this._url);
 }

  getImage(id: number) {
    return this.http.get(this._url)
                    .pipe(first(item => item.id === id));
  }

}

从项目的另一个地方

...
imageService.getImages().subscribe(images => /*...*/)
...

---

您需要从方法返回一个

可观察的

然后订阅

ImageService

实例的方法返回的数据

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

import { first } from 'rxjs/operators';

@Injectable()
export class ImageService {

  public _url: string = "https://jsonplaceholder.typicode.com/photos";

  constructor(public http: HttpClient) {}

  getImages() {
   return this.http.get(this._url);
 }

  getImage(id: number) {
    return this.http.get(this._url)
                    .pipe(first(item => item.id === id));
  }

}

从项目的另一个地方

...
imageService.getImages().subscribe(images => /*...*/)
...

---

http方法将返回observable，最好先阅读文档http方法将返回observable，最好先阅读文档。这里有一个有趣的注意事项，即

HttpClient

在订阅之前不会执行

.get

请求。这里有一个有趣的注意事项，即

HttpClient

在订阅之前不会执行

.get

请求。