[英]Angular2 rc1 : Http subscribe issue
I am trying implement my http service component using below link 我正在尝试使用下面的链接实现我的http服务组件
http://www.metaltoad.com/blog/angular-2-http-observables http://www.metaltoad.com/blog/angular-2-http-observables
My service component 我的服务组件
import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs/Rx';
@Injectable()
export class DemoService {
constructor(private http:Http) { }
// Uses http.get() to load a single JSON file
getFoods() {
return this.http.get('http://ip.jsontest.com/').map((res:Response) => debugger; res.json(););
}
// Uses Observable.forkJoin() to run multiple concurrent http.get() requests.
// The entire operation will result in an error state if any single request fails.
getBooksAndMovies() {
return Observable.forkJoin(
this.http.get('http://ip.jsontest.com/').map((res:Response) => res.json()),
this.http.get('http://date.jsontest.com/').map((res:Response) => res.json())
);
}
}
And parent component 和父组件
import {Component, ViewChild} from '@angular/core';
import {DemoService} from './demo.service';
@Component({
selector: 'my-app', //<----the element defined in the index.html
template: `
<h1>Angular2, Hello {{name}}</h1>
<div *ngIf="data_error">An error occurred while loading the data!</div>
<div>{{foods?.ip}}</div>
<div>{{books?.ip}}</div>
<div>{{movies?.date}}</div>
<br>
`
})
export class AppComponent {
name: string;
data_error: Boolean = false;
public foods: any;
public books: Array<string>;
public movies: Array<string>;
@ViewChild('mymodal')
modal: ModalComponent;
constructor(private _demoService: DemoService){
this.name = "ANIL";
this.getFoods();
this.getBooksAndMovies();
}
close() {
this.modal.close();
}
open() {
this.modal.open();
}
getFoods() {
this._demoService.getFoods().subscribe(
(data:any[]) => {
debugger;
//alert(data[0]); **this 'data' is undefined** :(
this.foods = data
},
err => { this.data_error = true }
);
}
getBooksAndMovies() {
this._demoService.getBooksAndMovies().subscribe(
data => {
debugger;
this.books = data[0];
this.movies = data[1];
}
);
}
} // <--- we need to export the class AppComponent.
Observable.forkJoin() can be subscribed successfully but could not understand what is the issue with http.get().map() Observable.forkJoin()可以成功订阅,但无法理解http.get()。map()有什么问题
Please help!!! 请帮忙!!!
In the map()
method you have to return something, so you can't just do debugger; res.json();
在map()
方法中,您必须返回一些内容,因此您不能只进行debugger; res.json();
debugger; res.json();
. 。 Do instead this in your service: 而是在您的服务中这样做:
// Uses http.get() to load a single JSON file
getFoods() {
return this.http.get('http://ip.jsontest.com/').map((res:Response) => {
debugger;
return res.json();
});
}
[...].map((res) => res.json());
// is a shorthand for:
[...].map((res) => { return res.json(); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.