Typescript类型安全服务不返回指定的类对象
很简单的问题。服务代码如下：
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from './user';
@Injectable()
export class UserService {
private _url = "https://jsonplaceholder.typicode.com/users";
constructor(private _httpClient: HttpClient) {
}
getUser(id: string){
return this._httpClient.get<User>(this._url + '/' + id);
}
}正如我所期望的，getUser方法返回用户的可观察性。
我想在组件中获取User对象，如下所示：
{ id: 1，姓名："a"，电话："b"，邮箱："c"，地址：{street："d"，套间："e"，城市："f"，邮政编码："g"} }
这是user.ts代码。
export class Address {
street: string;
suite: string;
city: string;
zipcode: string;
}
export class User {
id: number;
name: string;
phone: string;
email: string;
address = new Address();
}当我从组件调用服务时，我从jsonplaceholder获取整个用户对象，而不是从我的user.ts代码获取用户对象。我的组件代码：
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'newuserform',
templateUrl: './newuser-form.component.html',
providers: [UserService]
})
export class NewUserFormComponent implements OnInit {
constructor(
private _service: UserService,
private _router: Router,
private _route: ActivatedRoute) { }
ngOnInit(){
let id = this._route.snapshot.paramMap.get('id');
this._service.getUser(id)
.subscribe(
user => console.log(user);
);
}
}回答 2
Stack Overflow用户
发布于 2019-11-02 02:18:00
Typescript类型安全服务不返回指定的类对象
..。你误解了这是什么意思。您当前在代码中所说的，只是告诉编译器，您期望http-request返回的内容将符合您创建的模型。对此没有运行时检查。这只是为了在你编写代码时帮助你，因为编译器可以告诉你什么时候你正在做一些不符合你的模型的事情。这将使您的调试变得更容易。
所以你需要手动设置你想要的属性。或者通过编写一个函数来为您完成此操作，或者像我在map中所做的那样。而且，就像在其他答案中一样，如果没有特定于类的方法，我将使用接口。
如上所述，您需要设置所需的属性。在这里，我很懒，使用any作为http-request的返回类型，因为您不能使用User，因为这不是您从http-request获得的。不过，您将转换响应以返回User：
getUser(id: string): Observable<User> {
return this._httpClient.get<any>(this._url + "/" + id).pipe(
map((user: any) => {
return {
id: user.id,
name: user.name,
phone: user.phone,
email: user.email,
address: {
street: user.address.street,
suite: user.address.suite,
city: user.address.city,
zipcode: user.address.zipcode
} as Address
} as User
})
);
}
}在这种情况下，您还可以删除不需要的属性：
getUser(id: string): Observable<User> {
return this._httpClient.get<any>(this._url + "/" + id).pipe(
map((user: any) => {
delete user.company;
delete user.address.geo;
delete user.website;
return user as User;
})
);
}两个选项均为。
还可以阅读有关和的文档
Stack Overflow用户
发布于 2019-11-02 00:38:41
您不能限制服务器响应。试试这个：
服务：
getUser(id: string): User {
const user = this._httpClient.get(this._url + '/' + id);
return {
id: user.id,
name: user.name,
phone: user.phone,
email: user.email,
address: {
street: user.address.street,
suite: user.address.suite,
city: user.address.city,
zipcode: user.address.zipcode
}
};
}解释：const user是从jsonplaceholder返回的整个对象。return转换响应以满足您的需求。
您应该将User和Address定义为接口，而不是类。
export interface Address {
street: string;
suite: string;
city: string;
zipcode: string;
}
export interface User {
id: number;
name: string;
phone: string;
email: string;
address: Address;
}https://stackoverflow.com/questions/58662333
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号