在Angular 7 Typescript中映射两个对象

Question

我在Angular中有一个Reactive表单用于用户注册。反应性表单的设置意味着表单数据对象

与我的viewmodel对象不同

export interface RegisterViewModel {
UserName: string;
Email: string;
Password: string;
ConfirmPassword: string; }

明确地说，在表单对象中，这两个密码属性嵌套在单独的“ matching_passwords”对象中。

我的表单对象是在onSubmit（value）方法中捕获的

  onSubmit(value) {
this.accountService.register(value)
.pipe(first())
.subscribe(
  data => {
    console.log('successful registration');
    this.router.navigate(['/login']);
  },
  error => {
    console.log('unsuccessful registration');
  }); }

将值传递给需要RegisterViewModel对象的服务方法。

  register(viewModel: RegisterViewModel) {
    return this.http.post<any>('api/Account/Register', viewModel, httpOptions)
      .pipe(map(data => {
        return data;
      }));
  }

在不更改表单结构以使其与RegisterViewModel结构完全匹配的情况下，如何将这些不同的对象相互映射？

如何将表单模型传递给register方法register（viewModel：RegisterViewModel）？我希望我的RegisterViewModel可以从表单中接收电子邮件，用户名，密码和密码确认字符串。

Answer 1

您可以简单地从表单值构建对象。根据您的图片，看起来像这样：

// say your form value object is `form_values` (instead of `value` in your code)
const viewModelObject = <RegisterViewModel> {
  UserName: form_values.userName,
  Email: form_values.email,
  Password: form_values.matching_passwords.password,
  ConfirmPassword: form_values.matching_passwords.confirmPassword
};

然后致电

this.accountService.register(viewModelObject)
// ... following stays the same