2016-11-22 157 views
1
import { Injectable }  from '@angular/core'; 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 

// Import RxJs required methods 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch' 

@Injectable() 
export class EquipmentService{ 
    data: any; 
    constructor(private http:Http){ 

    } 
    getDefaultEquipment(){ 
     this.http.get('./app/SaveData/equipmentTest.json') 
      .map((res:Response) => res.json()) 
      .subscribe(data => { this.data = data}, 
       err => console.error(err), 
       () => console.log(this.data)); 
    } 
} 

从文件中读取数据,重要的是getDefaultEquipment()Angular 2 observable如何提取响应?

如果您看到最后一个console.log(this.data)数据是正确的,那正是我所需要的。但如果我return this.http.get(...() => {return this.data})我得到未定义。我如何获得并返回此数据?

很显然,如果我编写另一个如下所示的返回值,那么observable尚未完成,因此它将返回空数据:any。

//clearly won't work because the get hasn't returned yet 
getDefaultEquipment(){ 
    this.http.get(...data => {this.data = data}...); 
    return this.data; 
} 
+0

只需返回您的可观察值。您不需要将异步呼叫转换为同步呼叫。 – Cleiton

+0

您无法返回数据。不要订阅。只要返回可观察的。调用者将是订阅者,并将获得传递给subscribe()的回调函数中的数据。 –

+0

太棒了。那就是诀窍。在我的设备组件'this.equipmentService.getDefaultEquipment()中添加了订阅方法subscribe( stuff => {console.log(stuff)}, );'谢谢。 –

回答

4

以下是我对它的看法。未经测试,但概念是坚实的。由于async管道基本上吃Observables,这将为您节省很多样板代码。如果您需要做一些转换,那么在返回可观察值之前也可以做这些转换。你可以在服务中做到这一点,或者你可以在组件中做到这一点。请记住关于Observables的事情,如果您有多个订户,请务必使用.share()运营商,否则您将为每个订户执行一次(在此情况下)http.get.do运营商也可以派上用场,但也可以像用户一样行事。

我会推荐阅读RxJs,并参考关于异步管道用法的angulars网站的示例。

的角AsyncPipe是不纯的管的一个有趣的例子。 AsyncPipe接受Promise或Observable作为输入并自动订阅输入,最终返回发出的值。

equipment.service.ts

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Rx'; 

export interface Equipment { 
    name: string; 
    id: string; 
} 

@Injectable() 
export class EquipmentService { 

    constructor(private http:Http){} 

    public getDefaultEquipment(): Observable<Equipment[]> { 
    return this.http 
    .get('./app/SaveData/equipmentTest.json') 
    .map((res:Response) => res.json()); 
    } 
} 

设备-list.component.ts

import { Component, OnInit } from "@angular/core"; 
import { EquipmentService, Equipment } from "./services/equipment.service"; 
import { Observable } from 'rxjs/Rx'; 

@Component({ 
    selector: 'equipment-list', 
    templateUrl: './equipment-list.component.html', 
    styleUrls: ['./equipment-list.component.css'], 
    providers:[ 
    EquipmentService 
    ] 
}) 
export default class EquipmentComponent { 

    constructor(private service: EquipmentService) {} 

    public get equipment():Observable<Equipment[]> { 
     return this.service.getDefaultEquipment(); 
    } 
} 

设备-list.component.html

<ul> 
    <li *ngFor="item of (equipment | async)> 
     <span>{{item.id}}</span> 
     <span>{{item.name}} 
    </li> 
</ul> 
+3

当他们有一些解释时,答案是最好的。简单地说“这样做”并不能帮助我们理解*为什么它会以这种方式运作,并且如果出现类似的情况,也不会对我们有所帮助。 –

+1

对不起。有一个missclick并在解释完成之前发布。 – abdavid

+0

@abdavid的答案是正确和好的,虽然我不会写'.map((res:Response)=> res.json());'对一个服务,因为我想让我的组件**反应**响应:读取头文件,状态代码等 – Aitch