2016-07-28 69 views
0

im有点新的angular2,我希望你能帮助我我很肯定它必须是简单的东西,但这是交易即时通讯服务,可以处理http调用,但它的需要应用一些过滤器中的数据,而不要求加载之后再次以新的参数基本上我想要让angular2处理的那部分angular 2 rc4从Http observable获取数据后创建变量

更新** API服务器

服务

httpHandler(type,model){var token = this.LoginService.JwtDecoded(); var authHeader = new Headers(); authHeader.append('Authorization', 'Bearer ' + token);

return this.http.get('http://127.0.0.1/api/service/'+model, { 
     headers: authHeader 
     }) 
    .map((res: Response) => res.json()); } 

组件

this.Request.httpHandler('get','receiver/') 
.subscribe(
    data => this.data = data, <-- from here 
    err => this.error = 'there is a mistake!', 
    () => console.log(this.data) <-- this one is outputing just what i want 
); 
console.log(data); <-- i wanna output the same result in here 

所以,我怎样才能捕捉API导致到一个变量?

更新** 我想输出'this.data'外部订阅,奇怪的是,我可以输出内部订阅和在html中,但我需要做一些与该json输出前的东西在html中。任何想法的家伙?谢谢!

感谢您的时间伙计,非常感谢。

+0

可为了有一个最小的,完整的和可验证的例子,你应该详细说明你目前的问题是什么。它现在做了什么,为什么这是错的? – bpachev

回答

2

创建服务来获取数据

// xyz.service.ts 

import {Injectable} from '@angular/core'; 

import {Http, Response} from '@angular/http'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class DataService { 
    private url = `receiver/`; 

    constructor(private http: Http) { 
    } 

    getData(): Observable<any> { 
    return this.http.get(this.url) 
     .map((res: Response) => res.json()); 
    } 
} 

现在使用该服务的组件。现在

//xyz.component.ts 

import {Component, OnInit} from '@angular/core'; 

import {DataService} from './xyz.service'; 

import {HTTP_PROVIDERS} from '@angular/http'; 

@Component({ 
    selector: 'app-home-content', 
    templateUrl: 'xyz.component.html', 
    styleUrls: ['xyz.component.scss'], 
    providers: [DataService, HTTP_PROVIDERS] 
}) 
export class HomeContentComponent implements OnInit { 
    private data: Object; 

    constructor(private _dataService: DataService) { 
    } 

    ngOnInit() { 
    this._dataService.getData().subscribe(data => { 
     this.data = data; 
    }); 
    } 
} 

数据将在this.data

+0

谢谢里兹我试图做你说的,我不能让它的工作,奇怪的是,我可以输出内部订阅或在像数据?。名称的HTML,但我不能输出外订阅在相同的功能..做你有什么想法? – NanName

+0

这是因为它的一个异步功能。如果您想要任何数据,您必须在订阅中进行。它可以在HTML中访问,因为角度在检测到this.data已经改变时会自动更新视图。我宁愿你从订阅里面调用一个函数,然后在里面用'this.data'做任何你想做的事情,然后它就可以使用了。 – ritz078