Question

如何在单击按钮后显示复选框，将其保持选中状态？这可能吗？ Here is a working snippet。

.html

<a href="#tab1success" data-toggle="tab">
  <h5>
    <button mat-button class="btn filter" (click)="changeSummary()">Summary</button>
  </h5>
</a>

<div id="tab1success">
  <div *ngIf="bool">
    <label class="btn btn-light btn-filter" id="bttns">
      <input type="checkbox" name="name1" autoComplete="off"> check1
    </label>&nbsp;
    <label class="btn btn-light btn-filter" id="bttns">
      <input type="checkbox" name="name2" autoComplete="off"> check2
    </label>&nbsp;
  </div>
</div>

.ts

bool = false

changeSummary() {
    if (!this.bool) {
      this.bool = true;
    }
    else {
      this.bool = false;
    }
}

谢谢您的时间！

Answer 1

更改

<div *ngIf="bool">

通过

<div [hidden]="!bool">

Answer 2

我建议您使用Forms API来处理这种情况，使用模板驱动或模型驱动的形式，这是一种更简洁的方法。记住组件内部的值，一旦禁用模板，绑定将自动显示模型内部的内容。

//Create formSet object which will be holding all radio button
formSet = {};

HTML

//Assign `ngModel` to each of input
<label class="btn btn-light btn-filter" id="bttns">
  <input type="checkbox" [(ngModel)]="formSet.name" name="name2" autoComplete="off"> check1
</label>&nbsp;
<label class="btn btn-light btn-filter" id="bttns">
  <input type="checkbox" [(ngModel)]="formSet.name2" name="name2" autoComplete="off"> check2
</label>&nbsp;

Demo

对于所接受的答案，我并不反感，但是我个人无法消化将某些内容隐藏在DOM树中。 *ngIf在那里很合适，而使用表格就可以满足这里的目的。

隐藏后保持选中复选框

2 个答案: