Question

我无法将服务器返回的对象转换为我在打字稿中创建的类。

我的打字稿对象与从服务器返回的对象具有所有相同的属性，唯一的区别是我的打字稿类中的属性名称使用驼峰式大小写，其中从服务器返回的属性用标题大小写进行，因此当我访问某些内容时像我的打字稿代码中的userModel.isActive一样，它找不到此属性。以下是我从提供程序进行的api调用的返回语句。

return this.httpClient.post<UserModel>(url, { params: queryParams });

我尝试过：

this.userProvider.getUser(request).subscribe(modelReturnedFromApi => {
    Object.assign(this.myTypeScriptModel, modelReturnedFromApi)
    this.myTypeScriptModel = modelReturnedFromApi
    this.myTypeScriptModel = JSON.stringify(modelReturnedFromApi)
})

有人能指出我正确的方向吗？预先感谢

更新：似乎没有任何内置功能可以满足我的要求，所以我要硬着头皮，只在我的打字稿类上命名我的属性，就像从服务器返回的名称一样。谢谢大家的帮助。

Answer 1

如果您的属性名称不同，则可能必须将myTypeScriptModel的每个属性分配给匹配的modeReturnedFromApi属性

Answer 2

您可以执行以下操作，将每个带有标题的属性复制到相应的带有驼峰的属性：

for (let p in modelReturnedFromApi)
    myTypeScriptModel[p[0].toLowerCase() + p.substr(1)] = modelReturnedFromApi[p];

这仅向下一级有效。如果嵌套了标题转换为驼峰式大小写的对象，则需要一个递归函数。如果您无法自行解决，请在问题中添加示例输入，然后我将更新答案。

Answer 3

您可以创建与所需响应相关的模型类，并使用其构造函数将其转换为camelCase。

Person.ts

export class Person {
  firstName: string;
  lastName: string;

  constructor(person){
    this.firstName = person.Firstname;
    this.lastName = person.Lastname;
  }
}

app.component.ts

export class AppComponent implements OnInit {
  name = 'Angular';
  person: Person;

  // mocking response
  response = {
    'Firstname' : 'John',
    'Lastname': 'Wick'
  }

  ngOnInit(){
    // converting response into Person object
    this.person = new Person(this.response);
  }
}

Please refer to this stackblitz.

将服务器返回的对象转换为打字稿对象

3 个答案: