Angular 5 如何选择和取消选择复选框

Question

好的，我有一个使用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> 仅供测试。

还有 TypeScript。

accepted: boolean = false;

constructor(private modalService: NgbModal) {}

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

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

我尝试将[(ngModel)], *ngIf, ngModel从我的typescript转换为可接受的布尔值，但似乎没有起作用。

- Burst of Ice

---

你是想要勾选复选框吗？ 使用 *ngIf="accepted" 是不可能实现的。 - Basavaraj Bhusani

是的，我想要检查和取消选中它，但为了简单起见，我只在此处放置了检查它的代码。我首先尝试了[(ngModel)]="accepted"，但那也不起作用。 - Burst of Ice

复选框是否在“表单”容器内？ - ConnorsFan

是的，但这有什么关系吗？ - Burst of Ice

在这种情况下，当尝试加载模态框时，“[(ngModel)]”必须引起错误（可在控制台中看到）。但是，如果您还向复选框添加一个名称属性，它应该可以正常工作：<input name="chkAccepted" [(ngModel)]="accepted" ...>。这是与复选框使用双向数据绑定的适当方式。 - ConnorsFan

Answer 1

使用"[checked]"输入属性或属性来检查复选框。

使用布尔值来选中或取消选中复选框。

在模板中：

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

在TS中：

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

- Basavaraj Bhusani

---

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

这个在页面加载时才起作用，其他时候不起作用。 - undefined

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

至少这是我在处理按钮点击时的做法，你不能有两个单独的(click)。我已经在我的个人网站上成功使用了这种方法。

- Alex Mackinnon

---

我的错，只是复制粘贴的问题，但谢谢，我会修复它。不过，我用 Angular 2 在一年前尝试过，可行的。 - Burst of Ice

有趣，我得自己试试。那肯定不是你要找的解决方案...（该死的思考机器人）... 我可能会避免使用常见的关键字“open”，这是我的唯一子注释... 我只是想评论你的原始代码，但没有权限这样做... 烦人的错误，我也会尝试在每个方法中放置控制台日志消息，并打印值。 - Alex Mackinnon

我现在不在电脑旁，但我相信它曾经可以工作，但现在再看它，它似乎不太合逻辑，仍然能够工作。 - Burst of Ice