我是 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"); }} 我还有一个用于创建用户对象的用户界面。我知道以这种方式处理凭据是不安全的,请原谅我,现在我只是在试验。非常感谢!
添加回答
举报
0/150
提交
取消