Question

我是Angular的新手，我想使用Angular 5和AspNet Web Api创建注册操作

当我clic在视图中注册它调用Controller successl，一旦控制器完成它开始执行服务，但在服务中我总是没有定义参数映射：

查看：

<form (ngSubmit)="f.form.valid && signup()" #f="ngForm" class="m-login__form m-

 form" action="">
<ng-template #alertSignup></ng-template>
<div class="form-group m-form__group">
  <input class="form-control m-input" type="text" placeholder="Empresa" name="empresa" [(ngModel)]="model.empresa" #empresa="ngModel">
</div>
<div class="form-group m-form__group">
  <input class="form-control m-input" type="text" placeholder="Nombre" name="nombre" [(ngModel)]="model.nombre" #nombre="ngModel">
</div>
<div class="form-group m-form__group">
  <input class="form-control m-input" type="text" placeholder="Apellido" name="apellido" [(ngModel)]="model.apellido" #apellido="ngModel">
</div>
<div class="form-group m-form__group">
  <input class="form-control m-input" type="text" placeholder="Correo Electronico" name="email" [(ngModel)]="model.email" #email="ngModel" autocomplete="off">
</div>
<div class="form-group m-form__group">
  <input class="form-control m-input" type="password" placeholder="Contraseña" name="password" [(ngModel)]="model.password" #password="ngModel">
</div>
<div class="form-group m-form__group">
  <input class="form-control m-input m-login__form-input--last" type="password" placeholder="Confirm Password" name="rpassword" [(ngModel)]="model.rpassword" #rpassword="ngModel">
</div>
<div class="row form-group m-form__group m-login__form-sub">
  <div class="col m--align-left">
    <label class="m-checkbox m-checkbox--focus">
                        <input type="checkbox" name="agree" [(ngModel)]="model.agree" #agree="ngModel">
                       Estoy de acuerdo con los
                        <a href="#" class="m-link m-link--focus">
                          Términos y condiciones
                        </a>
                        .
                        <span></span>
                      </label>
    <span class="m-form__help"></span>
  </div>
</div>
<div class="m-login__form-action">
  <button [disabled]="loading" [ngClass]="{'m-loader m-loader--right m-loader--light': loading}" id="m_login_signup_submit" class="btn btn-focus m-btn m-btn--pill m-btn--custom m-btn--air">
                      Registrarse
                    </button>
  <button [disabled]="loading" id="m_login_signup_cancel" class="btn btn-outline-focus  m-btn m-btn--pill m-btn--custom">
                      Cancelar
                    </button>
</div>
</form>

服务：

register(email: string, password: string, empresa: string, nombre: string, apellido: string) {
    return this.http.post('http://localhost:58607/api/account/Register', JSON.stringify({ email: email, password: password, empresa: empresa, nombre: nombre, apellido: apellido }), { headers: new Headers({ 'Content-Type': 'application/json' }) })
      .map((response: Response) => {

        let user = response.json();
        if (user && user.token) {
          return user;
        }
      });
  }

组件：

signup() {
    this.loading = true;
    this._authService.register(this.model.email, this.model.password, this.model.empresa, this.model.nombre, this.model.apellido).subscribe(
      data => {
        this.showAlert('alertSignin');
        this._alertService.success(
          'Thank you. To complete your registration please check your email.',
          true);
        this.loading = false;
        LoginCustom.displaySignInForm();
        this.model = {};
      },
      error => {
        this.showAlert('alertSignup');
        this._alertService.error(error);
        this.loading = false;
      });
  }

当我对它进行debbug时，我没有在所有服务参数中定义，如下所示：

我做错了什么？此致

更新

在组件中我称之为模型： user: User;

然后在服务注册方法调用我做：

signup() {
    this.loading = true;
    this._authService.register(this.model).subscribe(
      data => {
        this.showAlert('alertSignin');
        this._alertService.success(
          'Thank you. To complete your registration please check your email.',
          true);
        this.loading = false;
        LoginCustom.displaySignInForm();
        this.model = {};
      },
      error => {
        this.showAlert('alertSignup');
        this._alertService.error(error);
        this.loading = false;
      });
  }

所以我明白了：

当它执行api控制器并从api返回成功时，它返回消息：

SyntaxError：JSON输入的意外结束

注意：我将服务更改为：

register(user: User) {
    const body: User = {
      email: user.email,
      password: user.password,
      rpassword : user.rpassword,
      empresa: user.empresa,
      nombre: user.nombre,
      apellido: user.apellido,
      agree: user.agree
    }
    return this.http.post(this.rootUrl + '/api/account/Register', body)
      .map((response: Response) => {
        // login successful if there's a jwt token in the response
        let user = response.json();
        if (user && user.token) {
        return user;
        }
      });
  }

Answer 1

将注册方法更改为以下内容：

register(user: User) {
  const body: any = {
  'email': user.email,
  'password': user.password,
  'rpassword' : user.rpassword,
  'empresa': user.empresa,
  'nombre': user.nombre,
  'apellido': user.apellido,
  'agree': user.agree
}

let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });

return this.http.post(this.rootUrl + '/api/account/Register', JSON.stringify(body), options)
  .map((response: Response) => {
    // login successful if there's a jwt token in the response
    let user = response.json();
    if (user && user.token) {
    return user;
    }
  });
}

Answer 2

尝试使用以下代码创建模型“model.ts”：

export class Model {
    empresa: string;
    nombre: string;
    apellido: string;
    email: string;
    password: string;
    rpassword: string;
    agree: boolean;
}

并更改组件中的实体类型，如下所示：

model:Model;

也不要忘记在组件文件中导入模型：

import {Model} from './model';

方法执行后

2 个答案: