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