Angular 2 observable如何提取响应？

Question

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()。

如果您看到最后一个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; 
} 

Answer 1

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

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

• http://blog.angular-university.io/functional-reactive-programming-for-angular-2-developers-rxjs-and-observables/
• https://angular.io/docs/ts/latest/guide/pipes.html

的角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>