在 Angular 中发布 http://localhost:3000/auth 400（错误请求）

Question

我正在尝试将注册表单数据发送到我的服务器，但收到（错误请求）。 我用 postman 测试了我的服务器，它可以正常使用以下数据：

{
    "username": "root",
    "email": "root@gmail.com",
    "password": "Pesho@"
}

但是 Angular 有问题 & 找不到是问题所在。

这是register.component.ts：

export class RegisterComponent implements OnInit {
  public registerFormGroup: FormGroup;

  constructor(
    private readonly auth: AuthService,
  ) { }

  ngOnInit() {
    this.registerFormGroup = this.auth.registerFormGroup(this.registerFormGroup);
  }

  public register(username: string, email: string, password: string) {
    this.auth.register(username, email, password);
    console.log({username});
    console.log({email});
    console.log({password});
  }
}

这是auth.srvice.ts：

public register(username: string, password: string, email: string): Subscription {
    return this.http.post('http://localhost:3000/auth',
      {
        username,
        email,
        password,
      })
      .subscribe(
        (success: any) => {
          this.notificator.success(success.message);
          setTimeout(() => {
            this.login(email, password);
          }, 1500);
        }
        ,
        (err) => {
          this.notificator.error(err.error.message);
        }
      );
  }

这就是小html寄存器形式——register.component.html ：

<form class="example-form" [formGroup]="this.registerFormGroup"
      (ngSubmit)="this.register(name.value, email.value, password.value)" autocomplete="off">

      <mat-card-content>

        <mat-form-field class="example-full-width">
          <input matInput #name autocomplete="off" formControlName="name" type="text" class="form-control"
          placeholder="Name *">
        </mat-form-field>

        <mat-form-field class="example-full-width">
          <input matInput #email autocomplete="off" #email matInput class="form-control" placeholder="Email *" type="email"
          formControlName="email">
        </mat-form-field>

        <mat-form-field class="example-full-width">
          <input matInput #password formControlName="password" type="password" class="form-control" placeholder="Password *">
        </mat-form-field>

      </mat-card-content>

      <button mat-stroked-button color="accent" class="btn-block" type="submit" value="Sign Up">Register</button>

    </form>

我放了一些控制台日志来查看表单发送的内容以及它们看起来是否正确：

{用户名：“root”} 用户名：“root”原型：Object

{电子邮件：“root@gmail.com”} email：“root@gmail.com”原型：Object

{密码：“Pesho@”} 密码：“Pesho@”原型：Object

我在之前的 Bootstrap 项目中使用了相同的逻辑，并且效果很好。 在这种情况下使用材料，但我认为问题不在于那里。 我在 NestJS 服务器终端中没有收到任何错误。

Answer 1

问题是您传递 arguments 的顺序

这是你的register.component.ts：

public register(username: string, email: string, password: string) {
this.auth.register(username, email, password); <---- Here you are passing username,email,password
console.log({username});
console.log({email});
console.log({password});
  }
}

这是auth.srvice.ts：在这里您接受用户名、密码、email

public register(username: string, password: string, email: string): Subscription {
return this.http.post('http://localhost:3000/auth',
  {
    username,
    email,
    password,
  })

因此，要在register.component.ts或auth.srvice.ts 中修复此开关 arguments