Immer ein object-array aus einer Eckigen service
Ich bin neu Eckig (und Javascript für diese Angelegenheit). Ich habe geschrieben ein Eckiges service gibt ein array von Benutzern. Der Abruf von Daten aus einer HTTP-Aufruf liefert die Daten im JSON-format. Bei der Anmeldung werden die JSON-Daten zurückgegeben, die von der HTTP-Aufruf kann ich sehen, dass dieser Aufruf erfolgreich ist und die korrekten Daten zurückgegeben. Ich habe eine Komponente, die Aufrufe der service-um den Anwender und eine HTML-Seite, die zeigt die Benutzer. Ich kann nicht die Daten aus dem service, um die Komponente. Ich vermute, ich bin mit dem Beobachtbaren falsch. Vielleicht bin ich mit zu abonnieren, die fälschlicherweise als gut. Wenn ich kommentiere die getUsers-Aufruf in der ngInit Funktion und kommentieren Sie die getUsersMock nennen, funktioniert alles einwandfrei und ich sehe die angezeigten Daten in der listbox in der HTML-Seite. Ich möchte zum konvertieren der JSON-Daten an ein array oder eine Liste von Benutzern im service, eher dann wieder JSON aus dem Dienst und der Komponente konvertieren.
Zurückgegebenen Daten aus HTTP-Aufruf, um Benutzer:
[
{
"firstName": "Jane",
"lastName": "Doe"
},
{
"firstName": "John",
"lastName": "Doe"
}
]
Benutzer.ts
export class User {
firstName: string;
lastName: string;
}
Benutzer-service.ts
...
@Injectable
export class UserService {
private USERS: User[] = [
{
firstName: 'Jane',
lastName: 'Doe'
},
{
firstName: 'John',
lastName: 'Doe'
}
];
constructor (private http: Http) {}
getUsersMock(): User[] {
return this.USERS;
}
getUsers(): Observable<User[]> {
return Observable.create(observer => {
this.http.get('http://users.org').map(response => response.json();
})
}
...
Benutzer.Komponente.ts
...
export class UserComponent implements OnInit {
users: User[] = {};
constructor(private userService: UserService) {}
ngOnInit(): void {
this.getUsers();
//this.getUsersMock();
}
getUsers(): void {
var userObservable = this.userService.getUsers();
this.userObservable.subscribe(users => { this.users = users });
}
getUsersMock(): void {
this.users = this.userService.getUsersMock();
}
}
...
user.component.html
...
<select disabled="disabled" name="Users" size="20">
<option *ngFor="let user of users">
{{user.firstName}}, {{user.lastName}}
</option>
</select>
...
!!! UPDATE !!!
Hatte ich gelesen das "Helden" - tutorial, war aber nicht für mich arbeiten, also ging ich Los und habe versucht, andere Dinge. Ich habe re-implementiert meinen code, den Weg der Helden-tutorial beschreibt. Allerdings, wenn ich das log der Wert dieser.Benutzer meldet, ist nicht definiert.
Hier ist mein überarbeitetes Benutzer-service.ts
...
@Injectable
export class UserService {
private USERS: User[] = [
{
firstName: 'Jane',
lastName: 'Doe'
},
{
firstName: 'John',
lastName: 'Doe'
}
];
constructor (private http: Http) {}
getUsersMock(): User[] {
return this.USERS;
}
getUsers(): Promise<User[]> {
return this.http.get('http://users.org')
.toPromise()
.then(response => response.json().data as User[])
.catch(this.handleError);
}
...
Hier ist mein überarbeitetes user.Komponente.ts
...
export class UserComponent implements OnInit {
users: User[] = {};
constructor(private userService: UserService) {}
ngOnInit(): void {
this.getUsers();
//this.getUsersMock();
}
getUsers(): void {
this.userService.getUsers()
.then(users => this.users = users);
console.log('this.users=' + this.users); //logs undefined
}
getUsersMock(): void {
this.users = this.userService.getUsersMock();
}
}
...
!!!!!!!!!! ENDGÜLTIGE LÖSUNG !!!!!!!!!!
Dies wird alle Dateien, die für die endgültige Lösung:
Benutzer.ts
export class User {
public firstName: string;
}
Benutzer.service.ts
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { User } from './user';
@Injectable()
export class UserService {
//Returns this JSON data:
//[{"firstName":"Jane"},{"firstName":"John"}]
private URL = 'http://users.org';
constructor (private http: Http) {}
getUsers(): Observable<User[]> {
return this.http.get(this.URL)
.map((response:Response) => response.json())
.catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}
}
Benutzer.Komponente.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { User } from './user';
import { UserService } from './user.service';
@Component({
moduleId: module.id,
selector: 'users-list',
template: `
<select size="5">
<option *ngFor="let user of users">{{user.firstName}}</option>
</select>
`
})
export class UserComponent implements OnInit{
users: User[];
title = 'List Users';
constructor(private userService: UserService) {}
getUsers(): void {
this.userService.getUsers()
.subscribe(
users => {
this.users = users;
console.log('this.users=' + this.users);
console.log('this.users.length=' + this.users.length);
console.log('this.users[0].firstName=' + this.users[0].firstName);
}, //Bind to view
err => {
//Log errors if any
console.log(err);
})
}
ngOnInit(): void {
this.getUsers();
}
}
Du musst angemeldet sein, um einen Kommentar abzugeben.
Werfen Sie einen Blick auf den code :
und code von https://angular.io/docs/ts/latest/tutorial/toh-pt6.html
(BTW. wirklich gutes tutorial, Sie sollten check it out)
Die HttpService-innen Angular2 gibt bereits eine beobachtbare, sou nicht brauchen, um wickeln Sie ein weiteres Beobachtbar herum, wie Sie es hier gemacht haben:
Versuchen, Folgen Sie der Anleitung im link, den ich angegeben habe. Sie sollte in Ordnung sein, wenn Sie studieren Sie es sorgfältig.
- - - - EDIT - - - - -
Erste von allen, WO Sie sich anmelden die das.Benutzer-variable? JavaScript funktioniert nicht so. Deine variable ist nicht definiert und es ist in Ordnung, weil der code-Ausführung bestellen!
Versuchen, es zu tun mögen dieses:
Sehen, wo die Konsole.log(...) ist!
Versuchen, sich zum Rücktritt von toPromise() es scheint nur für ppl mit keine RxJs hintergrund.
Fangen noch ein link: https://scotch.io/tutorials/angular-2-http-requests-with-observables Bauen Sie Ihren service noch einmal mit RxJs observablen.