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

时间:2019-07-08 22:56:42

标签: angular typescript

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

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

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

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)

1 个答案:

答案 0 :(得分:0)

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

原因:

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