как снять / проверить флажок 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

Метод 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
  }
}

См. этот стек бликов для демонстрации.

---

Метод 2 - Двусторонняя привязка + отключение элемента управления

Альтернативный метод - использовать двустороннюю привязку и отключить элемент управления для предотвращения изменений:

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

См. этот стек для демонстрации.