Làm thế nào để lấy dữ liệu từ quan sát được trong angular2

Question

Tôi cố gắng để in kết quả của http cuộc gọi trong Angular sử dụng rxjs

Xét đoạn mã sau

import { Component, Injectable, OnInit } from '@angular/core'; 
import { Http, HTTP_PROVIDERS } from '@angular/http'; 
import 'rxjs/Rx'; 

@Injectable() 
class myHTTPService { 
    constructor(private http: Http) {} 

    configEndPoint: string = '/my_url/get_config'; 

    getConfig() { 

    return this.http 
     .get(this.configEndPoint) 
     .map(res => res.json()); 
    } 
} 

@Component({ 
    selector: 'my-app', 
    templateUrl: './myTemplate', 
    providers: [HTTP_PROVIDERS, myHTTPService], 


}) 
export class AppComponent implements OnInit { 

    constructor(private myService: myHTTPService) { } 

    ngOnInit() { 
     console.log(this.myService.getConfig()); 
    } 
} 

Bất cứ khi nào tôi đã cố gắng để in ra kết quả của getconfig nó luôn trả lại

Observable {_isScalar: false, source: Observable, operator: MapOperator} 

mặc dù tôi trả lại đối tượng json thay thế.

Làm cách nào để in kết quả của getConfig?

Answer 1

Bạn cần phải đăng ký với quan sát và vượt qua một callback rằng các quá trình giá trị

this.myService.getConfig().subscribe(val => console.log(val)); 

Answer 2

góc phát ra dựa trên quan sát thay vì cơ sở lời hứa như của angularjs 1.x, vì vậy khi chúng tôi cố gắng để có được dữ liệu sử dụng http nó sẽ trả về quan sát thay vì lời hứa, như bạn đã làm

return this.http 
     .get(this.configEndPoint) 
     .map(res => res.json()); 

sau đó để lấy dữ liệu và hiển thị trên quan điểm chúng ta phải chuyển đổi nó thành dạng mong muốn sử dụng các chức năng như RxJs .map() function and .subscribe()

.map() được sử dụng để chuyển đổi các quan sát được (nhận được từ yêu cầu http) cho bất kỳ hình thức như .json(), .text() như đã nêu trong trang web chính thức của góc,

.subscribe() được sử dụng để đăng ký những phản ứng quan sát và tấn đưa vào một số biến để từ đó chúng ta hiển thị nó vào xem

this.myService.getConfig().subscribe(res => { 
    console.log(res); 
    this.data = res; 
}); 

Answer 3

this.myService.getConfig().subscribe(
    (res) => console.log(res), 
    (err) => console.log(err), 
() => console.log('done!') 
);