Angular 2 strings remain undefined on first iteration - asp.net-mvc

Question

I'm trying to fetch an object from the server via http.get and it works but the strings remain undefined on the first iteration.
The full object
The integers are ok, the problem is only with the strings.
this.http.get("/Home/getRoom", { headers: headers }).map(res => res.json()).subscribe(q => {
this.timecount = q.timeperquestion; this.player1id = JSON.stringify(q.player1id); this.player2id = q.player2id; }, err => console.error(err),
() => console.log('Complete'));
after the first iteration of the function the strings are shown.
EDIT:
this is the class:
class AppComponent implements AfterViewInit {
public answered = false;
public title = "loading question...";
public options = [];
public correctAnswer = false;
public working = false;
public timecount=15;
public timer;
public roomID;
public player1id;
public player2id;
constructor( #Inject(Http) private http: Http, private Ref: changeDetectorRef) {
}
nextQuestion() {
this.working = true;
this.answered = false;
this.title = "loading question...";
this.options = [];
var headers = new Headers();
headers.append('If-Modified-Since', 'Mon, 27 Mar 1972 00:00:00 GMT');
this.http.get("/Home/getRoom", { headers: headers }).map(res => res.json()).subscribe(q => {
this.timecount = q.timeperquestion;
this.player1id = JSON.stringify(q.player1id);
this.Ref.detectChanges();
},
err => console.error(err),
() => console.log('Complete'));
EDIT 2:
Ok it seems like everything is ok with the strings, when I try to display it with {{player1id}} it shows the right value even on the first iteration.
The "problem" is only with console.log(player1id) that i used to check the string with, it works only after one iteration.
Thank you for trying to help!

Answer 1

You could force the change detection to run using the ChangeDetectorRef class. Inject it and call its detectChanges method:
constructor(private changeDetectorRef:changeDetectorRef) {
}
someMethod() {
this.http.get("/Home/getRoom", { headers: headers }).map(res => res.json()).subscribe(q => {
this.timecount = q.timeperquestion;
this.player1id = JSON.stringify(q.player1id);
this.player2id = q.player2id;
this.changeDetectorRef.detectChanges();
},
err => console.error(err),
() => console.log('Complete'));
}

Answer 2

The reason the properties are undefined is due to the fact that they are actually not defined. Simply set them to an empty string = "" or declare them as a : string like this:
class AppComponent implements AfterViewInit {
public player1id: string;
public player2id = ""; // I usually prefer this as it is assigned a value
// Omitted for brevity...
}
In TypeScript you should either declare the type you're intending to use or assign it such that it is inferred. Otherwise you're kind of missing out on all the glory of TypeScript.