Ich möchte eine angular2 Observable in eine Klasse

Question

konvertieren Ich bin neu in angular2 und ich brach viel Zeit verbringen, um eine Lösung zu finden, aber ich tat es nicht. Ich möchte ein Observervable von einem http-Call-Speicher in einer Klasse konvertieren.

Ich habe folgendes:

JSON-Datei

[{ 
    "nickname": "magicMike", 
    "id": "123", 
    "name": "Michael", 
    "nachname": "Fischer", 
    "pictURL": "../images/mainPanel/Image_dummy.jpg", 
    "city": "Ulm" 
}] 

die Benutzerklasse-Datei:

export class User { 

    nickname: string; 
    id: string; 
    name: string; 
    nachname: string; 
    pictURL: string; 
    city: string; 


    constructor(
    nickname: string, 
    id: string, 
    name: string, 
    nachname: string, 
    pictURL: string, 
    city: string 
){ 
    this.nickname = nickname; 
    this.id = id; 
    this.name = name; 
    this.nachname = nachname; 
    this.pictURL = pictURL; 
    this.city = city; 
    } 
} 

Der Dienst, der die eine JSON-Datei lesen

import { Component, Input } from '@angular/core'; 
import { Injectable }  from '@angular/core'; 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
import {Observable} from 'rxjs/Rx'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 
import { User } from './user' 

@Injectable() 
export class UserService { 
    user: Array<User>; 
    private useUrl = '/json/user.json'; 
    constructor(private http: Http) { 

    } 



    getUser(): Observable<any> { 
    return this.http.get(this.useUrl) 
     .map(this.extractData) 
     .do(data => console.log("User from json: " + JSON.stringify(data))) 
     .catch(this.handleError); 
    } 

    private extractData(response: Response) { 
    let body = response.json(); 
    return body || {}; 
    } 


    private handleError(error: Response) { 
    console.log(error); 
    return Observable.throw(error.json().error || "500 internal server error"); 
    } 

Und der Componenten die nehmen Sie die beobachtbaren und speichern sie auf die ein Array

....... 
export class AppComponent implements OnInit { 


     public user: User[]; 

    ngOnInit() { 
     this.userService.getUser() 
      .map((user: Array<any>) => { 
      let result:Array<User> = []; 
      if (user) { 
       user.forEach((erg) => { 
       result.push(new User(erg.nickname, erg.id, erg.name, erg.nachname, erg.pictURL, erg.city)); 
       }); 
       } 

      }) 
      .subscribe(user => this.user = user); 
     } 
.... 

Als ich dieses ich den folgenden Fehler.

C:/Users/Lenovo/Documents/ui-challenger.one/src/app/app.component.ts (53,26): Type 'void' is not assignable to type 'User[]'.) 

Ich hoffe, dass jemand da draußen mir helfen kann. Ich will nur eine JSON-Datei in eine Klasse analysieren, die ich die Eigenschaften wie diese „User.name“ lesen kann

Answer 1

ngOnInit() { 
    this.userService.getUser() 
     .map((user: Array<any>) => { 
     let result:Array<User> = []; 
     if (user) { 
      user.forEach((erg) => { 
      result.push(new User(erg.nickname, erg.id, erg.name, erg.nachname, erg.pictURL, erg.city)); 
      }); 
     } 
     return result; // <<<=== missing return 
     }) 
     .subscribe(user => this.user = user); 
    } 

Answer 2

Sie brauchen nicht manuell json zu analysieren Objekt. Sie tun etwas wie unten -

getUser(): Observable<User[]> { 
    return this.http.get(this.useUrl) 
     .map(data => <User[]>data); 
    }