Question

我正在尝试为此网站创建登录身份验证。我在重新登录功能中无法重新定义“信条”。

我怀疑这是我定义对象凭证的方式。

这是定义对象凭据的方式：

export interface Credential {
    username: string;
    password: string;
}

出现问题的地方是

import { Credential } from 'src/app/shared/interface/credential';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {

  constructor(private router: Router,
              private app: AppComponent,
              private loginService: LoginAuthService) { }

  username: string;
  password: string;
  copyright: number;
  creds: Credential;
  x;

  ngOnInit() {
    const date = new Date();
    this.copyright = date.getFullYear();
  }

  login(): void {
// tslint:disable-next-line: triple-equals
    // if (this.username == 'admin' && this.password == 'admin') {
    //   console.log('success');
    //   this.app.toggleLoggedIn();
    //   this.router.navigate(['home']);
    // } else {
    //   alert('Invalid credentials');
    // }
    console.log(this.username); //prints fine
    console.log(this.password); //prints fine
    console.log(this.creds); //prints to undefined idk why
    this.creds.username = this.username;
    this.creds.password = this.password;
    this.x = this.loginService.submitCredentials(this.creds);
    console.log(this.x);
  }

LoginComponent.html：19错误TypeError：无法设置未定义的属性“用户名” 在LoginComponent.login（login.component.ts：41）

Answer 1

this.creds = { username: this.username, password: this.password}

原因：

更严格的TypeScript设置将显示creds: Credentials;实际上对于TypeScript是不好的做法，因为它没有被初始化（立即或在构造函数中）。因此，在this.creds中引用对象login()时，在技术上是未定义的。由于未定义的变量不能具有属性，因此会出现该错误。

无法在组件中的函数内编辑对象

1 个答案: