2016-06-23 37 views
5

मैं अपना पहला कोणीय 2 ऐप बना रहा हूं और मुझे देखने योग्य सबस्क्राइब करने में समस्या आ रही है।कोणीय 2 - चेनिंग अवलोकन योग्य सदस्यता

नीचे कोड फ़ायरफ़ॉक्स और आईई में क्रोम लेकिन नहीं में अच्छी तरह से काम करता है।

नीचे करने का सही तरीका क्या है? मुझे उपयोगकर्ता का वर्तमान स्थान प्राप्त करने की आवश्यकता है, फिर इसे दूसरी कॉल (getTiles) में पास करें।

मुझे वेब dev ब्राउज़र टूल में कोई त्रुटि नहीं दिखाई दे रही है। यह भी है जब मैं लोकलहोस्ट पर चलता हूं। साइट अभी तक तैनात नहीं है। मुझे यकीन नहीं है कि क्या इससे संबंधित हो सकता है।

मैं कोणीय 2.0.0-आरसी.2 का उपयोग कर रहा हूं।

ngOnInit(): void { 

     this._LocationService.getLocation().subscribe(
      location => {this.location = location; 

        // make the next call using the result of the first observable 
        this._TilesService.getTiles(0, location).subscribe(
         tiles => {this.tiles = tiles; this.index = 1;}, 
         error => this.errorMessage = <any>error);     
      });  
} 

यहाँ स्थान सेवा है ...

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

import { ILocation } from '../interfaces/location'; 

@Injectable() 
export class LocationService { 

    constructor() { } 

    getLocation(): Observable<ILocation> { 

     let locationObservable = new Observable<ILocation>((observer: Observer<ILocation>) => { 

      if (navigator.geolocation) { 

       var positionOptions = { 
        enableHighAccuracy: false, 
        timeout: 1000, 
        maximumAge: 5000 
       }; 

       navigator.geolocation.getCurrentPosition(function (position) { 

        var location: ILocation = { 
         Longitude: position.coords.longitude, 
         Latitude: position.coords.latitude 
        }; 

        observer.next(location); 
       }, this.locationErrorHandler, positionOptions); 
      } 
     }); 

     return locationObservable; 
    } 

    locationErrorHandler(error:any) { } 
} 

यहाँ getTiles सेवा है ...

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

import { ITile } from '../interfaces/tile'; 
import { ILocation } from '../interfaces/location'; 

@Injectable() 
export class TilesService { 

    constructor(private _http: Http) { } 

    getTiles(index: number, location: ILocation): Observable<ITile[]> { 
     this._tileUrl = 'SOME URL'; 

     return this._http.get(this._tileUrl) 
      .map((response: Response) => <ITile[]> response.json()) 
      .catch(this.handleError); 
    } 

    private handleError(error: Response) { 
     console.error(error); 
     return Observable.throw(error.json().error || 'Server error'); 
    } 
} 
+0

यह कोड सही दिखता है। इसके साथ गलत क्या है? हमें 'getLocation' और 'getTiles' –

+0

का कोड दें, मैं अपने कोणीय 2 आरसी 2 ऐप में कुछ ऐसा कर रहा हूं और यह सभी ब्राउज़रों पर काम करता है। मैं हर जगह मजबूत टाइपिंग का उपयोग करने का सुझाव दूंगा। यह निश्चित रूप से मेरे जीवन को आसान बनाता है। – hholtij

+0

मैंने getLocation और getTiles सेवाओं को पोस्ट किया है। –

उत्तर

4

आपका कोड सही है, लेकिन आपके मामले में आप घोंसले से बच सकते हैं ऐसा करके सदस्यता ...

ngOnInit(): void { 

    this._LocationService.getLocation().concatMap(location => { 
     this.location = location; 

     // make the next call using the result of the first observable 
     return this._TilesService.getTiles(0, location);  
    }).subscribe(
     tiles => {this.tiles = tiles; this.index = 1;}, 
     error => this.errorMessage = <any>error);     
} 

कॉन्सटैप (आरएक्सजेएस 5) https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md के अनुसार आरएक्सजेएस 4 में कॉनकैट का चयन किया गया है, मैंने आरएक्सजेएस 4 का उपयोग नहीं किया है, हालांकि

संबंधित मुद्दे