Question

我需要在Angular 7.3中请求我的api（https://myurl.com/login）登录（用户名和密码）。当我在没有user.models.ts的情况下使用POST时，收到了错误的请求错误。当我使用此模型时，出现以下错误：“ ERROR TypeError：无法设置未定义的属性'username'。”

user.model.ts

export class User {
constructor(public username: string,
            public password: string) {
    }
}

login.component.ts：

import {Component, OnInit} from '@angular/core';
import {NgForm} from '@angular/forms';
import {HttpClient} from '@angular/common/http';
import {LoginService} from '../services/login.service';
import {User} from '../models/user.model';


@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
    user: User;
    constructor(private httpClient: HttpClient, private loginService: 
LoginService) { }
    ngOnInit() {
    }
    onSubmit(form: NgForm) {
        this.user.username = form.value['login'];
        this.user.password = form.value['password'];
        this.loginService.LoginUser(this.user).subscribe(res => {
            console.log(res);
        });
    }
}

login.service.ts：

import {User} from '../models/user.model';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import {Injectable} from '@angular/core';

@Injectable()
export class LoginService {
    constructor(private http: HttpClient) { }

    LoginUser(user: User): Observable<User> {
        return this.http.post<User>('https://captn-boat-api.herokuapp.com/login', user)
        ;
    }
}

login.component.html

<div class="login--already-registered">
      <span class="login--screen-title">J'ai déjà un compte</span>

      <form class="login" method="GET" action="login" (ngSubmit)="onSubmit(f)" #f="ngForm">

        <div class="input--field text dark">
          <label for="login" class="control-label"><svg class="icon icon-envelope"><use xlink:href="#icon-envelope"></use></svg> E-mail</label>
          <input id="login" name="login" type="text" placeholder="" value="" ngModel>

        </div>

        <div class="input--field password dark">
          <label for="password" class="control-label"><svg class="icon icon-lock"><use xlink:href="#icon-lock"></use></svg> Mot de passe</label>
          <input id="password" name="password" type="password" placeholder="" value="" ngModel>

        </div>

        <div class="input--field checkbox dark">
          <label for="session"><input id="session" name="" value="session" type="checkbox"> se souvenir de moi</label>
        </div>

        <div class="login--submit">

          <button class="button button btn-submit" type="submit">

Answer 1

在这种情况下，您可以使用界面

website:8080

然后您可以将代码更改为

export interface IUser {
  username: string;
  password: string;
}

Answer 2

您永远不会实例化用户.....您可以如下更改onSubmit

代替：

this.user.username = form.value['login'];
this.user.password = form.value['password'];

执行此操作......

this.user = new User(form.value['login'], form.value['password']);

但是您真的需要User类吗？为什么不只定义一个IUser接口而不是一个User类来做...

this.user = form.value;
this.loginService.LoginUser(this.user).subscribe(res => {
        console.log(res);
    });

最好的方法，使用formGroup。...

在html中...。进行以下更改（包括所需的用户名和密码验证，如果表单无效，则禁用“提交”按钮。）

<form class="login" method="GET" action="login" (ngSubmit)="onSubmit(f)" [formGroup]="formGroup">

<input id="login" name="login" type="text" formControlName="username">
<input id="password" name="password" type="password" formControlName="password">

<button class="button button btn-submit" type="submit" [disabled]="!formGroup.valid">

然后，在组件ts文件中。...

formGroup: FormGroup = new FormGroup({
    username: new FormControl(null, Validators.required),
    password: new FormControl(null, Validators.required)
});

以及您的OnSubmit函数中。...

this.user = this.formGroup.value;
this.loginService.LoginUser(this.user).subscribe(res => {
    console.log(res);
});

Answer 3

您必须将user设为非法。

将user: User;替换为user: User= new User或user: User = {};

错误TypeError：无法设置未定义的属性“用户名”

3 个答案: