[英]Angular service not working with http.get observable
I am trying to retrieve json file from the server using http.get and subscribe to the observable from a component.我正在尝试使用 http.get 从服务器检索 json 文件并从组件订阅 observable。 However, it's returning an error, not the data.
但是,它返回的是错误,而不是数据。
Can you please tell me where I'm going wrong:你能告诉我我哪里出错了:
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);
}
}
and here's the component:这是组件:
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));
}
);
}
}
I'm using latest versions of Angular and rxjs library.我正在使用最新版本的 Angular 和 rxjs 库。
Please help.请帮忙。
Use HttpClient instead of Http
.使用 HttpClient 而不是
Http
。 Http
returns an Object of type Response
. Http
返回一个类型为Response
的对象。 You'll have to call the json()
method on it which will give you the data that you're looking for.您必须对其调用
json()
方法,该方法将为您提供所需的数据。
To avoid doing that, use HttpClient
.为避免这样做,请使用
HttpClient
。 And to use HttpClient
, you'll have to first add HttpClientModule
to the imports
array of your module.要使用
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);
}
}
Your API isn't secure.您的 API 不安全。 That's why the client is blocking it and giving a mixed content error.
这就是客户端阻止它并给出混合内容错误的原因。 This generally happens when some of your content is served over HTTPS and some are served over HTTP.
当您的某些内容通过 HTTPS 提供而某些内容通过 HTTP 提供时,通常会发生这种情况。 I don't really think there's a way to fix this without changing the API.
我真的不认为有办法在不更改 API 的情况下解决这个问题。
You should consider using an secure API for movies.您应该考虑为电影使用安全的 API。
You can use OMDb API .您可以使用OMDb API 。 It's a Secure and Free API to get movie details.
这是一个安全且免费的 API 来获取电影详细信息。 You'll have to create an API Key first.
您必须先创建一个 API 密钥。 You can do that here .
你可以在这里这样做。
In my case, I had both HttpClientTestingModule and HttpClientModule in the imports section of my app.module.ts file.就我而言,我的 app.module.ts 文件的导入部分中同时包含 HttpClientTestingModule 和 HttpClientModule。
Removing the HttpClientTestingModule from the app.module.ts fixed my issue.从 app.module.ts 中删除 HttpClientTestingModule 解决了我的问题。
Angular: 11.0.9角度:11.0.9
Package![]() |
Version![]() |
---|---|
@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 ![]() |
typescript![]() |
4.0.7 ![]() |
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.