typescript 我想将 angular2 observable 转换为一个类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42190002/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
I want to convert a angular2 observable to a class
提问by M. Fish
I am new in angular2 and I broke spend a lot of time to find a solution, but I didn't. I want to convert a oberservable from a http call store in a class.
我是 angular2 的新手，我花了很多时间来寻找解决方案，但我没有。我想从类中的 http 调用存储转换可观察对象。
I have the following:
我有以下几点：
json file
json文件
[{
"nickname": "magicMike",
"id": "123",
"name": "Michael",
"nachname": "Fischer",
"pictURL": "../images/mainPanel/Image_dummy.jpg",
"city": "Ulm"
}]
the user class file:
用户类文件：
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;
}
}
The service which read the a json file
读取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");
}
And the componenten which take the oberservable and store it to the a 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);
}
....
As I run this I getting the following error.
当我运行它时，我收到以下错误。
C:/Users/Lenovo/Documents/ui-challenger.one/src/app/app.component.ts (53,26): Type 'void' is not assignable to type 'User[]'.)
I hope anyone out there can help me on that. I just want to parse of a json file into a class that i can read the properties like this "User.name"
我希望那里的任何人都可以帮助我。我只想将一个 json 文件解析成一个类，我可以读取这样的属性“User.name”
采纳答案by Günter Z?chbauer
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);
}
回答by Yousuf
You dont need to manually parse json to Object. You do something like below -
您不需要手动将 json 解析为 Object。你做类似下面的事情 -
getUser(): Observable<User[]> {
return this.http.get(this.useUrl)
.map(data => <User[]>data);
}
