Angular 服务不适用于 http.get observable

Question

我正在尝试使用 http.get 从服务器检索 json 文件并从组件订阅 observable。 但是，它返回的是错误，而不是数据。

你能告诉我我哪里出错了：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs';

@Injectable()
export class MoviesService {

  constructor(private http: Http) {
  }

  getMovies() : Observable<any> {
    let url = API_URL;
    return this.http.get(url);
  }
}

这是组件：

import { Component } from '@angular/core';
import { MoviesService } from './movies.service';

@Component({
  selector: 'movies',
  templateUrl: './movies.component.html',
  styleUrls: ['./movies.component.css'],
  providers: [
    MoviesService
  ]
})

export class MoviesComponent {

  constructor(private moviesService: MoviesService) {};

  ngOnInit() {
    this.moviesService.getMovies().subscribe(
      (data: any) => {
        console.log("Success " + data);
      },
      (err) => {
        console.log("Error: " + JSON.stringify(err));
      }
    );
  }
}

我正在使用最新版本的 Angular 和 rxjs 库。

请帮忙。

Answer 1

使用 HttpClient 而不是Http 。 Http返回一个类型为Response的对象。 您必须对其调用json()方法，该方法将为您提供所需的数据。

为避免这样做，请使用HttpClient 。 要使用HttpClient ，您必须首先将HttpClientModule添加到模块的imports数组中。

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

@Injectable()
export class MoviesService {

  constructor(private http: HttpClient) {
  }

  getMovies() : Observable<any> {
    let url = API_URL;
    return this.http.get(url);
  }
}

更新

您的 API 不安全。 这就是客户端阻止它并给出混合内容错误的原因。 当您的某些内容通过 HTTPS 提供而某些内容通过 HTTP 提供时，通常会发生这种情况。 我真的不认为有办法在不更改 API 的情况下解决这个问题。

您应该考虑为电影使用安全的 API。

您可以使用OMDb API 。 这是一个安全且免费的 API 来获取电影详细信息。 您必须先创建一个 API 密钥。 你可以在这里这样做。

Answer 2

就我而言，我的 app.module.ts 文件的导入部分中同时包含 HttpClientTestingModule 和 HttpClientModule。

从 app.module.ts 中删除 HttpClientTestingModule 解决了我的问题。

角度：11.0.9

包裹	版本
@angular-devkit/架构师	0.1100.7
@angular-devkit/build-angular	0.1100.7
@angular-devkit/核心	11.0.7
@angular-devkit/schematics	11.0.7
@angular/cdk	11.2.5
@角度/cli	11.0.7
@角度/材料	11.2.5
@原理图/角度	11.0.7
@原理图/更新	0.1100.7
rxjs	6.6.6
打字稿	4.0.7