Angular2 rc1:Http 订阅问题
Angular2 rc1 : Http subscribe issue
我正在尝试使用以下方法实现我的 http 服务组件 link
http://www.metaltoad.com/blog/angular-2-http-observables
我的服务组件
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())
);
}
}
和父组件
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() 可以成功订阅,但无法理解 http.get().map() 有什么问题
请帮忙!!!
在 map()
方法中你必须 return 一些东西,所以你不能只做 debugger; res.json();
。在您的服务中改为这样做:
// 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(); });
我正在尝试使用以下方法实现我的 http 服务组件 link
http://www.metaltoad.com/blog/angular-2-http-observables
我的服务组件
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())
);
}
}
和父组件
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() 可以成功订阅,但无法理解 http.get().map() 有什么问题
请帮忙!!!
在 map()
方法中你必须 return 一些东西,所以你不能只做 debugger; res.json();
。在您的服务中改为这样做:
// 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(); });