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

Question

好吧，我有一个服务条款模态，它是一个 ngBootstrap 模态，当我按下按钮关闭那个按钮时，我想要关闭模态的 Action 定义复选框是否被选中这是 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 中接受 bool 值，但似乎没有任何效果。

Answer 1

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

在模板中:

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

在 TS 中:

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