第一次以角度提交表单时出现“TypeError无法读取未定义的属性”

Question

我是 Angular 的新手，对打字稿不太精通，所以我很难看出这里出了什么问题。我正在编写一个简单的登录表单，询问“用户名”和“密码”，并在后端调用一个 API 来验证凭据。

该 api 有效，我也能够在我的组件中收到正确的响应，但只能在表单的第二次（或以后）“提交”时。在第一次提交时，我得到一个ERROR TypeError: Cannot read property 'password' of undefined. 从第二个开始，我的控制台记录“登录成功等”。

我希望它在第一次尝试时记录成功！由于我在第二次提交时得到了正确的响应，因此该 api 可以正常工作，所以我认为它是一个顺序逻辑错误或一个实际的打字稿语法错误......感谢任何帮助。

组件：

  constructor(

    private http: HttpClient,

    private _studentService: StudentService) { }

  ngOnInit(): void {

  }

  user: User;

  submit(name: string, pass: string):void{

    // console.log(name, pass);

    this._studentService.getUserByUsername(name).subscribe(data => this.user = data);

    this.verify(this.user.password, pass);

    }

    verify(checkPsw: string, pass: string){

      if (checkPsw==pass){

        console.log("Login Successful " + this.user.username + this.user.userID);  //logging this to see if the request comes through correctly since the ID is not in the form, and it is correct, so api works.

      }else{

        console.log(this.user.password, pass);

      }

    }

  }

模板基础：

<form (submit)="submit(username.value, password.value)">

   <input #username name='studUsrn' class="form-control">

   <input #password type="password" name='studPswd' class="form-control">

   <button  type="submit" class="btn btn-primary">Login</button>

</form>

服务：

@Injectable({ 

  providedIn: 'root'

})

export class StudentService {

  constructor(private http:HttpClient) {}

  private _restUrl: string = "http://localhost:4200/users";

  //make an http call and receive a response

  getAllUsers(): Observable<User[]>{

    return this.http.get<User[]>(this._restUrl).pipe(catchError(this.errorHandler));

  }

  getUserByUsername(username: string): Observable<User>{

    console.log(this._restUrl+"/"+username);

    return this.http.get<User>(this._restUrl+"/"+username).pipe(catchError(this.errorHandler));

  }

  errorHandler(error: HttpErrorResponse){

    return throwError(error.message || "Server Error");

  }

} 

我还有一个用于创建用户对象的用户界面。我知道以这种方式处理凭据是不安全的，请原谅我，现在我只是在试验。非常感谢！

Answer 1

由于 getUserByUsername 方法是异步的，因此您还需要在订阅中调用 verify 方法，否则会在响应出现之前调用它。