Angular2 http bekomme Daten zu localstorage funktioniert nicht

Question

Ich begann vor kurzem an eckigen 2 zu arbeiten, und ich versuche gerade den http-Teil, aber ich habe ein paar Probleme.

Wenn ich auf die Schaltfläche klicke, um die Funktion zu aktivieren, sendet die http.get einen Schlüssel, einen Benutzernamen und ein Passwort an die API, die ich in PHP erstellt habe.

der HTTP empfängt die Details (dieser Teil funktioniert) und soll die Daten im lokalen Speicher speichern, aber das funktioniert nicht, es funktioniert nur, wenn ich ein zweites Mal klicke.

Was mache ich falsch?

HTML

<input type="text" [(ngModel)]="username" /><br> 
<input type="text" [(ngModel)]="password" /><br> 
<button (click)="checkLogin()">set</button> 

Angular2 Funktion

checkLogin() { 
    let url = 'http://localhost:82/api/getData.php?key=' + this.key + '&username=' + this.username + '&password=' + this.password; 
     this.http.get(url) 
     .subscribe(res => this.userData = res.json()); 

    let jsonId = this.userData['id']; 
    let jsonUsername = this.userData['username']; 

    localStorage.setItem('id', jsonId); 
    localStorage.setItem('username', jsonUsername); 

    // error handling 
    let jsonError = this.userData['error']; 

    localStorage.setItem('error', jsonError); 
} 

Answer 1

Sie sollten sicherstellen, dass Ihr die gewünschte Antwort erhalten, bevor es zu setzen. Versuchen Sie etwas wie folgt: