Angular2将json observable返回类型定义为接口或类模型
发布时间:2020-12-17 17:22:58 所属栏目:安全 来源:网络整理
导读:我希望将我的json api响应水合成一个类或基于一个接口,所以我总是知道我有什么属性. 我有以下 JSON: { "users": [ { "id": "bd3d70fd-03f7-4f5e-9ac1-4cb7221e352d","username": "caroga","username_canonical": "caroga","email": "caroga@caroga.net","em
|
我希望将我的json api响应水合成一个类或基于一个接口,所以我总是知道我有什么属性.
我有以下 JSON: {
"users": [
{
"id": "bd3d70fd-03f7-4f5e-9ac1-4cb7221e352d","username": "caroga","username_canonical": "caroga","email": "caroga@caroga.net","email_canonical": "caroga@caroga.net","groups": [],"roles": [],"games": [],"_links": {
"self": {
"href": "/app_dev.php/api/users/bd3d70fd-03f7-4f5e-9ac1-4cb7221e352d"
},"users": {
"href": "/app_dev.php/api/users/"
}
}
},{
"id": "df33d9cb-b575-427f-b2bd-ed9c364110f7","username": "joemi","username_canonical": "joemi","email": "joemi@joemi.nl","email_canonical": "joemi@joemi.nl","_links": {
"self": {
"href": "/app_dev.php/api/users/df33d9cb-b575-427f-b2bd-ed9c364110f7"
},"users": {
"href": "/app_dev.php/api/users/"
}
}
}
],"count": 2
}
以下界面和型号: Users.ts import {User} from "../User";
export interface Users{
count: number,users: Array<User>,}
User.ts export class User {
id: string;
username: string;
username_canonical: string;
email: string;
email_canonical: string;
groups: Array<string>;
roles: Array<string>;
games: Array<string>;
constructor(values: Object = {}) {
Object.assign(this,values);
}
}
用户data.service.ts import {Injectable} from "@angular/core";
import {Http} from "@angular/http";
import {ApiService} from "./api.service";
import {environment} from "../../environments/environment";
import {Observable} from "rxjs";
import {Users} from "../Models/Interfaces/Users";
@Injectable()
export class UserDataService extends ApiService {
constructor(private http: Http) {
super();
}
getAllPlayers(): Observable<Users> {
return this.http.get(environment.apiUrl + '/users/',this.addJwtHeader())
.map(result => result.json());
}
}
users.component.ts import {Component,OnInit} from "@angular/core";
import {UserDataService} from "../../services/user-data.service";
import {User} from "../../Models/User";
import {Observable} from "rxjs";
import {Users} from "../../Models/Interfaces/Users";
@Component({
selector: 'app-users',templateUrl: './users.component.html',styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
private users: User[];
constructor(private PlayerDataService: UserDataService) {
}
ngOnInit(): void {
this.getListOfAllUsers().subscribe(users => {
console.log(users);
this.users = users.users;
});
}
public getListOfAllUsers(): Observable<Users> {
return this.PlayerDataService.getAllPlayers();
}
}
users.component.html <ul>
<li *ngFor="let user of users">
{{ user.username }}
</li>
</ul>
手头的问题:
我在这做错了什么? 解决方法getAllPlayers(): Observable<Users> {
return this.http.get(environment.apiUrl + '/users/',this.addJwtHeader())
.map(result => result.json());
}
你基本上是“铸造”(或简称“引用”)一个简单的JS对象(从json()函数返回到你期望成为用户的东西,但它不会那样工作. 我猜你想做的事情可能是这样的: getAllPlayers(): Observable<Users> {
return this.http.get(environment.apiUrl + '/users/',this.addJwtHeader())
.map(result => result.json().map(obj => new User(obj)));
}
(当然,感谢你的构造函数) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |

