1

私は Angular2 の初心者で、Observables について助けが必要です。

リモートリソースからデータを取得してユーザーに表示するWebアプリがあります。

問題は、http を使用してデータを取得し、それをローカルに保存してから、他のコンポーネントで使用する必要があることです。

次のスキームを試しました：

data.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class Airports {
    private airportsUrl: string;
    private cities: any;
    private countries: any;
    private routes: any;
    private rawData: Observable<any>;
    private errorMessage: any;

    constructor(private http: Http) {
        this.airportsUrl = '';
    }

public get Cities() {
    this.serverData.publishLast().refCount().subscribe(
        data => this.cities = JSON.stringify(data)
    );
    return this.cities;
}

public get Countries() {
    this.serverData.publishLast().refCount().subscribe(
        data => this.countries = JSON.stringify(data)
    );
    return this.countries;
}

public get Routes() {
    this.serverData.publishLast().refCount().subscribe(
        data => this.routes = JSON.stringify(data)
    );
    return this.routes;
}

private init() {
    this.serverData
        .subscribe(
            data => this.rawData = data,
            error =>  this.errorMessage = <any> error
        );
}
private get serverData() {
    return this.http
        .get(this.airportsUrl)
        .map(this.parseData)
        .catch(this.handleError);
}
private parseData(res: Response) {
    let body = res.json();
    return body;
}
private handleError (error: any) {
    let errMsg = (error.message) ? error.message :
    error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg);
    return Observable.throw(errMsg);
}
}

controller.ts

import '../../../public/css/styles.css';
import { Component, OnInit } from '@angular/core';

import { Airports } from './../data/data';

@Component({
    providers: [Airports],
    selector: 'destination-selector',
    styleUrls: ['./../views/view.cityselector.css'],
    templateUrl: './../views/view.cityselector.html',
})
export class CitySelector implements OnInit {
    private cities: any;
    private countries: any;
    private routes: any;

    constructor(private airports: Airports) { }

    public ngOnInit() {
        this.cities = this.airports.Cities;
        this.countries = this.airports.Countries;
        this.routes = this.airports.Routes;
    }
}

view.cityselector.html

<main>
    <div>Cities: {{ cities }}</div>
    <div>Countries: {{ countries }}</div>
    <div>Routes: {{ routes }}</div>
</main>

しかし、このスキームでは http を 3 回 (代わりに 1 回) 呼び出しますが、この値{{ cities }}は未定義です。

したがって、http からデータを取得し、ローカル変数に保存し、その後ローカル データを使用して、常に新しい http を呼び出す方法

4

1 に答える 1

0

これは、Angular2 の http.get が、サブスクライブを呼び出すまで実際にはデータを取得しないオブザーバブルを返すためだと思います。次に、subscribe を呼び出すたびに、新しい http リクエストを作成します。代わりに、すぐに http.get をサブスクライブし、サービスの変数に一度設定する必要があると思います。次に、サービスのパブリック関数がその変数の値のオブザーバブルを返すようにします。

Cory Rylan によるこの記事は非常に役に立ち、私が取り組んでいたデータ サービスを開始するきっかけになりました。

私のサービスがアプリの残りのデータの配列を管理していたところで、私はこのようなことをしました。次に、データを使用するコンポーネントで、DataService をインポートし、dataService.getData() の戻り値をサブスクライブします。

@Injectable
export class DataService {
  constructor(private http: Http){
    this.loadData();
    }
  private _url = 'http://yoururlhere.com:3000/api/path';
  public _appData$: BehaviorSubject<any[]> = new BehaviorSubject([]);
  private appData:any[] = [];

  loadData() {
    console.log('Making HTTP request, loading data...');
    this.http.get(this._url).map(this.extractData).subscribe(
      data => {
        this.appData = data;
        this._appData$.next(data);
      },
      error => {
        console.log(error);
      }
    );
  }

  addData(newData){
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({
      headers: headers
    });
    
    this.http.post(this._url, newData, options).map(this.extractData).subscribe(data => {this.appData.push(data); this._appData$.next(this.appData);});

   }
  getData(){
    return Observable.from(this._appData$);
    }

  private extractData(res: Response) {
    let body = res.json();
    return body || {};
  }
}

于 2016-10-19T20:38:32.560 に答える