簡體   English   中英

Angular2 rc1:HTTP訂閱問題

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM