角度模型对象未正确映射

Posted 2023-03-13

【中文标题】角度模型对象未正确映射

【英文标题】：angular model objects not mapped correctly

【发布时间】：2019-07-30 02:35:54

【问题描述】：

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

用户.service.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():numberreturn this._id;
    set id(id:number)this._id = id;

    get username():stringreturn this._username;
    set username(username:string)this._username = username;

    get email():stringreturn this._email;
    set email(email:string)this._email = email;

    get phone():stringreturn this._phone;
    set phone(phone:string)this._phone = phone;

以下是我的问题：

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

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

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

这里有什么我遗漏的吗？

【问题讨论】：

不确定，但 this 和 this 会有所帮助:)

【参考方案1】：

是的，这是正确的行为。

当您在 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
      )
    ))