1

I've got problem with Angular 2 / web service call. My idea is to create service as injectable to use it within component that has to be localized (in these terms, use different languages). My strings are stored in database and what I need to do is to get them using the web service and store them in associative array. Then provide method to get value by the key from it. Here is my sample code:

import {Injectable} from "@angular/core";
import { Http, Headers, RequestOptions, Response } from "@angular/http";

import "rxjs/add/operator/map";
import "rxjs/add/operator/share";

import myGlobals = require("./global");

@Injectable()
export class LocalizationService {
    private serviceUrl = myGlobals.urlPrefix + "api/public/Localization.asmx/GetStrings";  // url to web api
    private observable: any;
    private locString: {};
    private finished: boolean = false;

    constructor(private http: Http) {
        this.loadStrings("EN");
    }

    private loadStrings(LanguageCode: string): void {
        let body: string = JSON.stringify({ LanguageCode });
        let headers: Headers = new Headers({
            "Access-Control-Allow-Origin": "*",
            "Content-Type": "application/json"
        });
        let options: RequestOptions = new RequestOptions({ headers: headers });
        this.observable = this.http.post(this.serviceUrl, body, options)
            .map(response => {
                this.observable = null;
                let responseText: string = response.text().substring(0, response.text().lastIndexOf("{"));
                this.locString = JSON.parse(responseText).Data;
                this.finished = true;
            })
            .share();

        return;
    }

    public getStr(code: string): string {
        let returnString: string;
        try {
            returnString = this.locString[code];
        }
        catch (error)
        {
            returnString = "";
        }

        return returnString;
    }
}

Now what I cannot solve: the constructor calls the web service and ends immediately, it doesn't wait for the response. So when I use this injectable service in my component, that has to be rendered in correct language, the strings are not loaded during the render time. To be precise, when I set the breakpoint to the .map() call, it never gets hit. This is not the worst problem, I can do it using promise as I'm doing it on other places in app. Promises are working good for me when I need to call web service. Problem is that it doesn't wait for replay from server. I've checked other questions and answers such as

What is the correct way to share the result of an Angular 2 Http network call in RxJs 5?

but this doesn't help me in any way. I can't make the application wait till the response is returned. Is there anybody who can tell me what am I doing wrong?

Community
  • 1
  • 1
Martin
  • 75
  • 3
  • 11
  • There just is no way to make the application wait for an async call to return. What you can do is to execute code when the response arrives. This is what the answers to the question you linked to demonstrate. – Günter Zöchbauer Aug 06 '16 at 13:26
  • thanks for not very good news :) so, do you have anything to suggest how to make the app localizable using the web service? – Martin Aug 06 '16 at 13:32
  • As the answers to the linked question suggests. If you want to use values from the server then provide the values using an `Observable` and access them by subscribing to the the observable. – Günter Zöchbauer Aug 06 '16 at 13:35

0 Answers0