为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

沧海一幻觉 2022-10-08 10:11:54
我是 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");  }} 我还有一个用于创建用户对象的用户界面。我知道以这种方式处理凭据是不安全的,请原谅我,现在我只是在试验。非常感谢!
查看完整描述

1 回答

?
海绵宝宝撒

TA贡献1809条经验 获得超8个赞

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



查看完整回答
反对 回复 2022-10-08
  • 1 回答
  • 0 关注
  • 106 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号