我正在使用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不显示,第一个不隐藏
我认为绑定模式不能正常工作
答案 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就像上面一样,更加用户友好和可读。