可觀察的Angular 2如何提取響應？

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})我將無法定義。 我如何到達並返回this.data？

顯然，如果我編寫了另一個如下所示的返回值，則可觀察值尚未完成，因此它將返回空數據：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運算符也可以派上用場，但它的作用類似於訂閱者。

我建議閱讀RxJ並看一下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

Angular AsyncPipe是一個不純管道的有趣示例。 AsyncPipe接受Promise或Observable作為輸入，並自動訂閱輸入，最終返回所發出的值。

設備服務

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());
  }
}

設備清單.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();
    }
}

equipment-list.component.html

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