[英]Angular2 rc1 : Http subscribe issue
我正在嘗試使用下面的鏈接實現我的http服務組件
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()
方法中,您必須返回一些內容,因此您不能只進行debugger; res.json();
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(); });
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.