我正在尝试对复选框更改进行简单切换，但它仅显示。什么是问题？

Question

我正在尝试在复选框更改事件上执行 div 切换，但它不起作用（它仅显示 div 但未在取消选中时隐藏）。什么是问题？

html

<input type="checkbox" (change)="subCheckboxClicked()"> Show/Hide

<div *ngIf="isSubBatchEdit" class="mb-3">
  <strong>Edit Sub Impacts</strong>      
</div>

ts

export class AppComponent  {
  isSubBatchEdit = false;

  subCheckboxClicked() {
    this.isSubBatchEdit = true;
  };
}

https://angular-ivy-5q3gjd.stackblitz.io/

Answer 1

你可以做到

subCheckboxClicked() {
    this.isSubBatchEdit = !this.isSubBatchEdit;
  };

或者更好地使用 [(ngModel)]

<input type="checkbox" [(ngModel)]="isSubBatchEdit"> Show/Hide

<div *ngIf="isSubBatchEdit" class="mb-3">
  <strong>Edit Sub Impacts</strong>      
</div>

看到最后一个你只需要声明一个变量

isSubBatchEdit:boolen=false

是的，Angular .ts 中的工作关系变量与我们在 .html（带视图的关系模型）中看到的内容

我正在尝试对复选框更改进行简单切换，但它仅显示。什么是问题？

I am trying to have a simple toogle on checkbox change but it's only showing. What is issue?

toggle

typescript

angular