如何使用一个变量在角度模态中显示和隐藏两个div

时间:2019-03-04 13:10:52

标签: html angular bootstrap-modal

我正在使用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不显示,第一个不隐藏

我认为绑定模式不能正常工作

2 个答案:

答案 0 :(得分:3)

您的函数类型有误,应为this.passwordOk而不是this.passworkOk

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

答案 1 :(得分:3)

我喜欢使用* 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就像上面一样,更加用户友好和可读。