Html 如何用一个变量显示和隐藏角度模式中的两个div

我使用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>

当我点击按钮并且密码正确时，第二个div没有显示，第一个div没有隐藏

---

我认为modal中的绑定无法正常工作

函数中存在键入错误，应该是this.passwordOk而不是this.passworkOk

---

函数中存在键入错误，应为this.passwordOk而不是this.passworkOk

---

我喜欢使用*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更方便用户和可读性。

我喜欢使用*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更方便用户和可读性

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