javascript - 如何手动取消选中/选中 primeng 复选框

Question

html

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

typescript

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

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

Answer 1

方法 1 - 处理 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
  }
}

参见this stackblitz进行演示。

---

方法2-双向绑定(bind)+禁用控制

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

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

参见this stackblitz进行演示。