Question

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

您能告诉我我要去哪里了吗

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));
      }
    );
  }
}

这是组件：

10.class == Integer # => true
10.5.class == Float # => true

我正在使用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密钥。您可以here来做。

Answer 2

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

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

角度：11.0.9

<头>

包装	版本
@angular-devkit/architect	0.1100.7
@angular-devkit/build-angular	0.1100.7
@angular-devkit/core	11.0.7
@angular-devkit/schematics	11.0.7
@angular/cdk	11.2.5
@angular/cli	11.0.7
@angular/material	11.2.5
@schematics/angular	11.0.7
@schematics/update	0.1100.7
rxjs	6.6.6
打字稿	4.0.7

Angular服务不适用于http.get observable

2 个答案:

更新