Angular 5选择和取消选择一个复选框答案

【问题标题】：Angular 5 select and unselect a checkboxAngular 5选择和取消选择一个复选框
【发布时间】：2018-08-29 17:49:35
【问题描述】：

好吧，我有一个服务条款模式，它是一个 ngBootstrap 模式，当我按下按钮关闭该按钮时，我希望关闭模式的操作定义复选框是否被选中这是html：

  <ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
  <h4 class="modal-title">Terms of service.</h4>
  <button type="button" class="close" aria-label="Close" (click)="d('Cross 
  click')">
  <span aria-hidden="true">&times;</span>
  </button>
  </div>
  <button type="button" class="btn btn-success" (click)="c('Close click'); 
   setAccepted(true)" >I accept.</button>
  </ng-template>

打开模式和复选框的链接

<div class="custom-control custom-checkbox">
            <input *ngIf="accepted" type="checkbox" class="custom-
control-input" id="save-info" required>
            <label class="custom-control-label" for="save-info">I have read 
</label><a href="javascript:void(0)" (click)="open(content)"> 
  the terms of service</a>.
</div>

在它下面我有 <p>{{accepted}}</p> 只是为了测试

还有打字稿

accepted: boolean = false;

constructor(private modalService: NgbModal) {}

open(content) {
 this.modalService.open(content);
}

setAccepted(accepted:boolean){
  this.accepted = accepted;
}

我尝试了 [(ngModel)], *ngIf, ngModel 到我的打字稿中接受的布尔值，但似乎没有任何效果。

【问题讨论】：

您是否要选中该复选框？ *ngIf="accepted" 不可能做到这一点？
是的，我想检查和取消检查它，但为了简单起见，我只把我必须检查的代码放在这里。我首先尝试了 [(ngModel)]="accepted" 但这也不起作用。
复选框是否位于form 容器内？
是的，但为什么这很重要？
在这种情况下，[(ngModel)] 在尝试加载模式时一定会导致错误（在控制台中可见）。但是，如果您还向复选框添加名称属性，它应该可以工作：<input name="chkAccepted" [(ngModel)]="accepted" ...>。这是使用带有复选框的双向数据绑定的适当方式。

标签： angular checkbox

【解决方案1】：

使用“[checked]”输入属性或属性。使用布尔值来检查取消选中复选框。

在模板中：

    <input [checked]="accepted" type="checkbox" class="custom-
control-input" id="save-info" required>

在 TS 中：

accepted: Boolean;
accepted = true;   // Or False

【讨论】：

我注意到如果我运行 myForm.reset() 方法它不会取消选中复选框？

【解决方案2】：

嗯，一条评论……你有……

 <button type="button" 
 class="btn btn-success" 
 (click)="c('Close click')" 
(click)="setAccepted(true)" >I accept.</button>

应该是

 <button type="button" class="btn btn-success" 
 (click)="c('Close click');setAccepted(true)" >I accept.</button>

至少这是我为按钮单击执行此操作的方式，您不能有两个单独的（单击）。我已经在我自己的个人网站上使用它来取得成功。

【讨论】：

我的错误只是复制粘贴问题，但谢谢我会修复它，一年前我尝试使用 angular 2 时可以使用它。
有意思，那我得自己试试了。那么那肯定不是您正在寻找的解决方案...（该死的思考机器人）..我可能会避免常用关键字“open”是我唯一的子评论..我只会评论您的原创但没有代表这样做..讨厌的错误，我还尝试将控制台日志消息放入每个方法中，并打印值
我现在不在我的电脑前，但我相信它曾经可以工作，但不是我再次查看它，它仍然可以工作似乎不合逻辑。