时间戳

首页 > 解决方案 > 角度模型对象未正确映射

angular - 角度模型对象未正确映射

问题描述

我正在调用 REST API 并返回Observable<User[]>如下：

用户服务.ts

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor(private httpClient:HttpClient) { }

  getAllUsers():Observable<User[]>{
    return this.httpClient.get<User[]>('https://jsonplaceholder.typicode.com/users');
  }
}

在我的组件类中，我订阅并分配给实例变量：

用户组件.ts

private users:User[];
constructor(private userService:UserService) { }

  ngOnInit() {
    this.userService.getAllUsers()
     .subscribe(users => this.users = users) 
 }

我还创建了我的模型类User.ts

export class User{

    constructor(
        private _id:number,
        private _username:string,
        private _email:string,
        private _phone:string
    ){}

    get id():number{return this._id;}
    set id(id:number){this._id = id;}

    get username():string{return this._username;}
    set username(username:string){this._username = username;}

    get email():string{return this._email;}
    set email(email:string){this._email = email;}

    get phone():string{return this._phone;}
    set phone(phone:string){this._phone = phone;}
}

以下是我的问题：

  1. 当我在从服务中获取用户后打印方法this.users内部ngOnInit时，我还得到了所有未在我的User.ts类中映射的属性。例如：地址、网站等。

  2. 这种行为是否正确，因为我正在获得打字稿支持以仅调用组件内模型类中定义的属性，但能够在打印时查看所有属性。

  3. 有没有办法只从服务中获取属性，因为我的应用程序可能只需要来自服务的数据子集，而我不想将整个 json 数据加载到组件中？

有什么我在这里想念的吗。

标签： angulartypescript

解决方案

是的，这是正确的行为。

当您在方法上使用泛型类型时，httpClient.get您将结果转换为该类型，而不是构造类的实例。

至于只将您需要的字段返回给您，这将取决于您调用的 API。

您的示例中使用的 json 占位符 API 不支持此功能。

如果您希望组件中的对象成为该类的实例，则Users可以在分配它们时实例化该类：

 ngOnInit() {
    this.userService.getAllUsers()
     .subscribe(users => this.users = users.map(user => new User(
        user.id,
        user.username,
        user.email,
        user.phone
      )
    )) 
 }

推荐阅读