在 angular 中首次提交表单时出现“TypeError Cannot read property of undefined” [重复]

Question

这个问题在这里已经有了答案：

如何从 angular 中的 Observable/http/async 调用返回响应？ (10 个回答)

去年关闭。

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

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

我希望它在第一次尝试时记录成功，因为我在第二次提交时得到了正确的响应。 api 有效，所以我想它是一个顺序逻辑错误或实际的 typescript 语法错误......任何帮助表示赞赏。

组件：

  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");
  }
} 

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

Answer 1

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