如何手动取消/选中引号复选框

Question

html

<p-checkbox name="showLinkedRisksOnly" id="showLinkedRisksOnlyChkBx" 
   label="Show Only Linked Risks" binary="true" (click)="showOnlyLinkedRisks($event)"
   [ngModel]="showLinkedRisksOnly" ></p-checkbox>

打字稿

showOnlyLinkedRisks($event){
  if(condition){
    this.showLinkedRisksOnly = !this.showLinkedRisksOnly;
  }
}

我正在尝试根据条件将复选框的状态改回选中/取消选中之前的状态。但是由于某些原因，当我确实更改this.showLinkedRisksOnly的值时，复选框和模型不同步。 可以实现

Answer 1

首先，绑定onChange事件而不是click事件。 然后将复选框实例添加到事件中

IntStream.iterate(number, i -> i + number)
        .takeWhile(i -> i < threshold)
        .forEach(System.out::println);

在打字稿中

<p-checkbox name="showLinkedRisksOnly" #something id="showLinkedRisksOnlyChkBx" label="Show Only Linked Risks" binary="true" (click)="showOnlyLinkedRisks($event, something)" [ngModel]="showLinkedRisksOnly"></p-checkbox>

对不起，我的英语不好！

Answer 2

方法1-处理ngModelChange +触发更改检测

要将复选框设置为只读，可以处理ngModelChange事件：

<p-checkbox ...
  [ngModel]="showLinkedRisksOnly" 
  (ngModelChange)="showOnlyLinkedRisks($event)">
</p-checkbox>

并在事件处理程序中执行以下步骤：

1. 设置新值
2. 如果复选框为只读
   1. 触发变化检测
   2. 将原始值放回去

constructor(private cd: ChangeDetectorRef) { }

showOnlyLinkedRisks(value) {
  this.showLinkedRisksOnly = value;    // Set the new value
  if (!this.condition) {               // If the checkbox is readonly
    this.cd.detectChanges();           // Trigger change detection
    this.showLinkedRisksOnly = !value; // Put the original value back
  }
}

有关演示，请参见this stackblitz。

---

方法2-双向绑定+禁用控件

另一种方法是使用双向绑定，并禁用控件以防止更改：

<p-checkbox ...
  [(ngModel)]="showLinkedRisksOnly" 
  [disabled]="!condition">
</p-checkbox>

有关演示，请参见this stackblitz。