angle2 observableをクラスに変換したい

Question

私はangular2で新しく、解決策を見つけるのに多くの時間を割いたが、私はしなかった。私はクラスのhttp呼び出しストアからoberservableを変換したいと思います。

私は、次があります。

JSONファイル

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

ユーザクラスファイル：

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; 
    } 
} 

JSONファイルを読み込んサービス

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"); 
    } 

そして、コンポーネントそれはoberservableをとり、配列に格納します。

....... 
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); 
     } 
.... 

私はこれを実行すると次のエラーが発生します。

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

私は誰もそこに助けてくれることを願っています。私はちょうど私がこの「User.name」あなたは手動でオブジェクトにJSON解析する必要がいけない

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

のような性質を読むことができるクラスにJSONファイルの解析します。あなたは以下のようなことをする -

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