Невозможно редактировать объект внутри функции в компоненте

Question

Я пытаюсь создать аутентификацию для входа на этот сайт.У меня возникают проблемы при переопределении 'creds' в функции входа в систему.

Я подозреваю, что именно так я определил учетные данные объекта.

Это способ определения учетных данных объекта:

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: Невозможно установить свойство 'username' из неопределенного в LoginComponent.login (login.component.ts): 41)

Answer 1

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

Причина:

Более строгие настройки TypeScript показали бы, что creds: Credentials; на самом деле плохая практика для TypeScript, потому что он не инициализируется (немедленно или в конструкторе).Поэтому объект this.creds, когда вы ссылаетесь на него в login(), технически не определен.Поскольку неопределенные переменные не могут иметь свойства, вы получаете эту ошибку.