如何使用一个变量在Angular模态中显示和隐藏两个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;
        }
  }

当我单击按钮并且密码为ON时，第二个div不会显示，第一个div不会隐藏

我认为绑定在模态中无法正常工作

Answer 1

你的功能有一个错误的类型，应该是this.passwordOk而不是this.passworkOk

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

Answer 2

我喜欢用* n​​gIf ..; else ..语法就像这些情况一样;

<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。