时间戳

首页 > 解决方案 > 错误类型错误：无法读取未定义的属性“用户名”在我的浏览器控制台中列出

javascript - 错误类型错误：无法读取未定义的属性“用户名”在我的浏览器控制台中列出

问题描述

我目前正在尝试使用 Angular 8 将我的登录页面路由到另一个页面，但它在我的浏览器控制台中给了我这个错误。错误类型错误：无法读取 LoginComponent.push../src/app/login/login.component.ts.LoginComponent.login (login.component.ts:30) 处未定义的属性“用户名”

HTML 代码：

<div class="login-grid">
  <div></div>
  <form class="login-form box-shadow">
    <div class="form-group">
      <label  for="exampleInputEmail1">User Name</label>
      <input [(ngModel)]="user.username" name="username" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="User Name">
    </div>
    <div  class="form-group">
      <label  for="exampleInputPassword1">Password</label>
      <input [(ngModel)]="user.password" name="password"  type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group form-check">
      <input type="checkbox" class="form-check-input" id="exampleCheck1">
      <label class="form-check-label" for="exampleCheck1">Remember Me?</label>
    </div>
    <button mat-raised-button color="primary" (click)="login(creds)">Login</button>
  </form>
  <div></div>
</div>

打字稿代码：

export interface IUser {
  id?: number;
  username: string;
  password: string;
}
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  user: IUser = { username: null, password: null };

  constructor(private router: Router, private toastService: ToastService) {

  }

  ngOnInit() {

  }
  login(user: IUser) {
    console.log('this user is ', user);
    const presetUser = { username: 'admin', password: 'password' };

    if (user.username != null && user.password != null &&
      user.username !== '' && user.password !== '') {
      // log the user in
      console.log('from within if statement...');
      this.router.navigate(['contacts', user]);
      if (user.username === presetUser.username &&
        user.password === presetUser.password) {
        // log the user into contacts page
        // saving data to localStorage
        localStorage.setItem('user', JSON.stringify(user));
        // navigate to contacts page
        this.router.navigate(['contacts', user]);
      } else {
        this.toastService.showToast('warning', 2000, 'Username or password is wrong!');
      }

    } else {
      console.log('Must specify credentials');
      this.toastService.showToast('danger', 2000, 'Must specify credentials');
    }
  }
}

标签： javascripthtmlangulartypescriptweb-applications

解决方案

用户未定义，因为当您提交表单时，您有：

 <button mat-raised-button color="primary" (click)="login(creds)">Login</button>

但creds不是什么，所以你得到了未定义的错误。您已经在代码文件中将用户定义为变量，因此这将起作用：

login() {
    console.log('user', this.user);
}

this.user 是链接到 html 中的 ngModels 的内容。

推荐阅读