隐藏后保持复选框选中答案

【问题标题】：Keep checkbox checked after is hide隐藏后保持复选框选中
【发布时间】：2018-11-07 22:12:05
【问题描述】：

如何在单击按钮时显示复选框后保持选中状态？这可能吗？ 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;
    }
}

感谢您的宝贵时间！

【问题讨论】：

我可以推荐这个 changeSummary 的变体：changeSummary() { bool=!bool }

标签： html angular

【解决方案1】：

改变

<div *ngIf="bool">

由

<div [hidden]="!bool">

【讨论】：

很好，非常感谢。我会在 10 分钟内接受你的回答！

【解决方案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 在那里很合适，而在这里使用表单就足够了。

【讨论】：