как показать и скрыть два div в угловых модальных с одной переменной

Question

Я использую Angular 5 и хочу показать и скрыть div с переменной

Я сделал это в HTML-файле:

<ng-container *ngIf="!passwordOk">
  <input id="idInputPwd" type="password" [(ngModel)]="password"/>
  <button id="idLoginBtnSubmit" (click)="checkPassword()"/>
</ng-container>

<ng-container *ngIf="passwordOk">
  <label>Access OK</label>
</ng-container>

В моем компоненте яэтот простой метод:

passwordStored = "test";
password = "";
passwordOk = false;

public checkPassword() {
        if(this.password === this.passwordStored){
            this.passworkOk = true;
        } else {
            this.passworkOk = false;
        }
  }

Когда я нажимаю на кнопку и пароль в порядке, второй div не отображается, а первый не скрывается

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

Answer 1

Мне нравится использовать * ngIf ..;еще .. синтаксис в подобных ситуациях;

<ng-container *ngIf="passwordOk; else passwordNotOk">
  <label>Access OK</label>
</ng-container>
<ng-template #passwordNotOk>
  <input id="idInputPwd" type="password" [(ngModel)]="password"/>
  <button id="idLoginBtnSubmit" (click)="checkPassword()"/>
</ng-template>

Он более удобен и удобен для чтения. Я думаю, что при использовании ngIf, как указано выше.

Answer 2

В вашей функции есть опечатка, должно быть this.passwordOk, а не this.passworkOk

public checkPassword() {
  if(this.password === this.passwordStored){
    //this.passworkOk = true;
    this.passwordOk = true;
  } else {
    //this.passworkOk = false;
    this.passwordOk = false;
  }
}