如何手动取消选中/选中一个primeng复选框

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 事件。 然后将复选框实例添加到事件

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

在打字稿中

showOnlyLinkedRisks(event, control) {
    if (false) {
      control.checked = false;
    } else { this.showLinkedRisksOnly = event.checked; }
}

对不起，我的英语不好！

Answer 2

方法一——处理ngModelChange+触发变化检测

要使复选框只读，您可以处理ngModelChange事件：

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

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

1. 设置新值
2. 如果复选框是只读的
   3. 触发变化检测
   4. 恢复原值

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

有关演示，请参阅此 stackblitz 。

---

方法二——双向绑定+禁用控制

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

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

有关演示，请参阅此 stackblitz 。